@extends('layout')
@section('content')
    <style>
        .profile-pic {
            width: 150px;
            height: 150px;
            display: inline-block;
            border: #ccc 1px solid;
            padding: 1px;
        }

        .file-upload {
            display: none;
        }

        img {
            max-width: 100%;
            height: auto;
        }

        .p-image {
            top: 120px;
            left: 58px;
            color: #666666;
            transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
        }

        .p-image:hover {
            transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
        }

        .upload-button {
            font-size: 1.2em;
        }

        .upload-button:hover {
            transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
            color: #999;
        }
    </style>
    <!-- begin::main content -->
    <main class="main-content">
        <div class="container">
            <!-- begin::page header -->
            <div class="page-header">
                <h3>{{ __('message.notification') }}</h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ asset('dashboard') }}">{{ __('message.dashboard') }}</a></li>
                        <li class="breadcrumb-item"><a href="{{ asset('hrms\notification')}}">{{ __('message.notification') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('message.add') }}</li>
                    </ol>
                </nav>
            </div>
            <!-- end::page header -->
            <x-flashMessage />
            @if (count($errors) > 0)
                @foreach ($errors as $error)
                    {{ $error }}
                @endforeach
            @endif
            {{-- Billing --}}

            <form class="needs-validation" enctype="multipart/form-data" method="POST" action="{{asset('hrms/save-notification')}}" novalidate enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="notification_id" value="{{$notification->id}}">
                <div class="row">
                    <div class="col-md-12">
                       
                        <div class="card">
                            <div class="card-body">
                                
                                <a href="{{asset('notification')}}"
                                    class="btn btn-primary pull-right  text-white waves-effect waves-button waves-light"><i
                                        class="fa fa-list"></i>&nbsp;{{ __('message.notification') }} {{ __('message.list') }}</a>
                                <h6 class="card-title">{{ __('message.notification') }} {{ __('message.information') }}</h6>

                                <div class="form-row">
                                    <div class="col-md-6">
                                        <div class="col-md-12 mb-3">
                                            <label for="heading">Branch<span class="text-danger">*</span></label>

                                                <select name="branch_id" class="form-control">
                                                    <option selected disabled>SELECT</option>
                                                    @foreach($branches as $value)
                                                        <option value="{{$value->id}}" {{$notification->branch_id == $value->id ? 'selected' : ''}} >{{$value->school}}</option>
                                                    @endforeach
                                                </select>
                                            @if ($errors->has('branch_id'))
                                                <div class="invalid-feedback">
                                                    {{ $errors->first('branch_id') }}
                                                </div>
                                            @endif
                                        </div>
                                        <div class="col-md-12 mb-3">
                                            <label for="heading">Department<span class="text-danger">*</span></label>

                                                <select name="department_id" class="form-control department_change">
                                                    <option selected disabled>SELECT</option>
                                                    @foreach($department as $value)
                                                        <option value="{{$value->id}}" {{$notification->department_id == $value->id ? 'selected' : ''}}>{{$value->name}}</option>
                                                    @endforeach
                                                </select>
                                            @if ($errors->has('department_id'))
                                                <div class="invalid-feedback">
                                                    {{ $errors->first('department') }}
                                                </div>
                                            @endif
                                        </div>

                                        <div class="col-md-12 mb-3">
                                            <label for="heading">Type<span class="text-danger">*</span></label>

                                                <select name="type" class="form-control ">
                                                    <option value="single" {{$notification->type == "single" ? 'selected' : ''}}>Employee</option>
                                                    <option value="all" {{$notification->type == "all" ? 'selected' : ''}}>All</option>
                                                    
                                                </select>
                                            @if ($errors->has('type'))
                                                <div class="invalid-feedback">
                                                    {{ $errors->first('type') }}
                                                </div>
                                            @endif
                                        </div>

                                        <div class="col-md-12 mb-3">                                        
                                            <label for="name">Employee</label>
                                            <select name="user_unique_id"  class="form-control select2 text-capitalize employee_select" >
                                                
                                            </select>                                                    
                                        </div>

                                        <div class="col-md-12 mb-3">
                                            <label for="heading">Title<span class="text-danger">*</span></label>

                                                <input type="text" name="title" value="{{$notification->title}}" class="form-control {{ $errors->has('heading') ? 'is-invalid' : '' }}">
                                            @if ($errors->has('title'))
                                                <div class="invalid-feedback">
                                                    {{ $errors->first('title') }}
                                                </div>
                                            @endif
                                        </div>
                                        
                                        <div class="col-md-12 mb-3">
                                            <label for="description">{{ __('message.description') }}<span class="text-danger">*</span></label>
                                            <textarea name="description" class="form-control {{ $errors->has('description') ? 'is-invalid' : '' }}" id="notification"
                                                value="{{ old('description') }}" >{{$notification->description}}</textarea>
                                            @if ($errors->has('description'))
                                                <div class="invalid-feedback">
                                                    {{ $errors->first('description') }}
                                                </div>
                                            @endif
                                        </div>
                                        
                                    </div>
                                </div>

                                <hr>
                                <button class="btn btn-success btn-uppercase waves-effect waves-button waves-light"
                                    type="submit">
                                    <i class="ti-check-box m-r-5"></i>{{ __('message.save') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </main>
    <!-- end::main content -->
@endsection
@push('footer-script')
    <script src="{{ asset('public/admin/vendors/input-mask/jquery.mask.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script>

        
$(window).on('load',function(){
            var notification = @json($notification);
            var user_unique_id = notification.user_unique_id;
            var id = notification.department_id;

            

            $.ajaxSetup({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            });

                    $.ajax({
                        type: "post",
                        url: "{{asset('hrms/fetch-department-employee')}}",
                        data:{
                            id:id
                        },
                        dataType: "html",
                        success: function(result) 
                        {
                            $(".employee_select").html('');
                            var allData = JSON.parse(result);
                            var emp = allData.data;
                            var i;

                            $(".employee_select").append("<option selected disabled>SELECT</option>");
                            for(i=0;i<emp.length;i++)
                            {
                                var selected = emp[i].user_unique_id == user_unique_id ? 'selected' : '';
                                var option = `                                        
                                        <option value="${emp[i].user_unique_id}" ${selected} >${emp[i].name}</option>
                                        `;
                                $(".employee_select").append(option);
                            }
                            
                                                       
                        },
                        error:function(xhr,status,error)
                        {
                            $(".employee_select").html('');
                            console.log(xhr);
                           
                        }
                    });
        });

        // Get Section
        $("#class").on('change', function() {
            var URL = "{{ asset('admission/get-section/') }}" + "/" + $(this).val();
            $.ajax({
                type: "GET",
                url: URL,
                dataType: "JSON",
                success: function(data) {
                    $("#section").empty();
                    $("#section").select2({
                        data: data
                    });
                    $("#section").val("{{ Request::get('section') }}").trigger('change');
                }
            });
        });

        $('#type').on('change',function(){
            var type = $(this).val();
            if(type == 'for_all')
            {
                $('.class').css('display','none')
                $('.section').css('display','none')
            }else if(type == 'for_class')
            {
                $('.class').css('display','block')
                $('.section').css('display','none')
            }else if(type == 'for_section')
            {
                $('.class').css('display','block')
                $('.section').css('display','block')
            }
            // alert(type);
        });

        $(".department_change").on('change',function(){
                    var id = $(this).val(); 
                   
                    $.ajaxSetup({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            });

                    $.ajax({
                        type: "post",
                        url: "{{asset('hrms/fetch-department-employee')}}",
                        data:{
                            id:id
                        },
                        dataType: "html",
                        success: function(result) 
                        {
                            $(".employee_select").html('');
                            var allData = JSON.parse(result);
                            var emp = allData.data;
                            var i;
                            $(".employee_select").append("<option selected disabled>SELECT</option>");
                            for(i=0;i<emp.length;i++)
                            {
                                var option = `                                        
                                        <option value="${emp[i].user_unique_id}">${emp[i].name}</option>
                                        `;
                                $(".employee_select").append(option);
                            }                            
                                                       
                        },
                        error:function(xhr,status,error)
                        {
                            $(".employee_select").html('');
                            console.log(xhr);
                           
                        }
                    });

            });
    </script>
@endpush
