@extends('admin.layout.master')
@section('title',__('obs.'.$blade_info['name']))
@section('custom_style') 
    <link href="{{asset('assets/css/custom_print.css')}}" rel="stylesheet"/>
@if($blade_info['type']==2)
    <link rel="stylesheet" href="{{ asset('assets/vendor/summernote/summernote.css')}}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/summernote/summernote-bs3.css')}}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/codemirror/lib/codemirror.css')}}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/codemirror/theme/monokai.css')}}" />
    <script src="{{asset('assets/vendor/modernizr/modernizr.js')}}"></script>
@endif
@endsection
<style>
    .note-editor .note-editable{
        box-shadow: inset -1px 4px 10px 0px rgb(212 212 212);
        font-size: 14px !important;
    }
    .note-editor .note-toolbar{
        color:var(--card_header_font);
        background-color: var(--card_header);
        /* background-color: #155f4d !important; */
        /* #181819 */
    }
    .note-editor .note-statusbar .note-resizebar {
        color:var(--card_header_font);
        background-color: var(--card_header);
        /* background-color: #155f4d !important; */
        /* #181819 */
    }
    .border_primary {
        border:solid 1px var(--card_header);
    }
    .modal-content {
        position: fixed !important;
    }
</style>
@section ('content')
    <div class="card sina-card">
        <div class="card-header card-header-s d-flex flex-wrap align-items-center">
            <div class="col-md-6 col-12 pl-0">
                <h4> {{__('obs.'.$blade_info['name'])}}</h4>
            </div>
        </div>
        <div class="card-body">
            <form method="post" name="form" id="form" action="{{ route($blade_info['name'].'.send') }}" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-10">
                        <div class="d-flex flex-wrap mb-1">
                            <div class="col-md-2 col-6 flex-wrap pr-0 pt-2 checkbox">
                                <input type="checkbox" value="1" class="m-1" name="all_vendor" id="all_vendor" onchange="disableParty('all_vendor', 'vendor_id')">
                                <label for="all_vendor"> {{__('obs.all')}} {{__('obs.vendor')}}</label>
                            </div>
                            <div class="col-md-2 col-6 flex-wrap pl-0 pt-2 checkbox">
                                <input type="checkbox" value="1" class="m-1 pl-0" name="all_customer" id="all_customer" onchange="disableParty('all_customer', 'customer_id')">
                                <label for="all_customer"> {{__('obs.all')}} {{__('obs.customer')}}</label>
                            </div>
                            @if($blade_info['type']==1)
                                <div class="col-md-2 col-6 flex-wrap pl-0 pt-2 checkbox">
                                    <input type="checkbox" value="1" class="m-1 pl-0" name="is_schedule" id="is_schedule" onchange="$('#is_schedule').is(':checked') ? $('#date_div').show('slow') : $('#date_div').hide('slow');">
                                    <label for="is_schedule">{{__('obs.create')}} {{__('obs.schedule')}}</label>
                                </div>
                            @endif
                           
                        </div>
                        <div class="row d-flex flex-wrap mb-1">
                            <div class="col-md-4 col-12 flex-wrap pr-0 mb-2">
                                <label for="vendor_id">{{__('obs.vendor')}}</label>
                                <select class="vendor_live" style="width: 100%" name="vendor_id[]" id="vendor_id" multiple> </select>
                            </div>
                            <div class="col-md-4 col-12 flex-wrap pr-0 mb-2">
                                <label for="customer_id">{{__('obs.customer')}}</label>
                                <select class="customer_live" style="width: 100%" name="customer_id[]" id="customer_id" multiple> </select>
                            </div>
                            <div class="col-md-4 col-12 flex-wrap pr-0 mb-2" id="date_div" style="display: none">
                                <label for="schedule_date">{{__('obs.schedule')}} {{__('obs.date')}}</label>
                                <input type="text" class="form-control date_picker" name="schedule_date" id="schedule_date" value="{{date('d-m-Y')}}">
                            </div> 
                            @if($blade_info['type']==1)
                                <div class="col-md-12 col-12 flex-wrap pr-0 mb-2">
                                    <label for="text">{{__('obs.text')}}</label>
                                    <textarea type="text" name="text" id="text" class="form-control" rows="3"> </textarea>
                                </div>
                            @else
                                <div class="col-md-12 col-12 flex-wrap pr-0 mb-2">
                                    <label for="subject">{{__('obs.subject')}}</label>
                                    <input type="text" name="subject" id="subject" class="form-control"/>
                                </div>
                                <div class="col-md-12 col-12 flex-wrap pr-0 mb-2">
                                    <label for="attachment">{{__('obs.attachment')}}</label>
                                    <input type="file" name="attachment" id="attachment" class="form-control"/>
                                </div>
                                <div class="col-md-12 col-12 flex-wrap pr-0 mb-2">
                                    <label for="cc">{{__('obs.cc')}}</label>
                                    <input type="cc" name="cc" id="cc" class="form-control"/>
                                </div>
                                <div class="col-md-12 col-12 flex-wrap pr-0 mb-2">
                                    <label for="text">{{__('obs.template')}}</label>
                                    <textarea class="summernote" name="content" id="content" data-plugin-summernote data-plugin-options='{ "height": 300, "codemirror": { "theme": "ambiance" } }'>
                                    </textarea>
                                </div>
                            @endif
                        </div>
                    </div>
                    @if($blade_info['type']==1)
                        <div class="col-md-2">
                            <div class="card p-2">
                                <div class="d-flex">
                                    <div class="col-9 px-0">
                                        <h6 for="">{{__('obs.balance')}}</h6> 
                                    </div>
                                    <div class="text-right col-3">
                                        <a class="text-danger btn-xs" onclick="getBalance();"><i class="fas fa-sync-alt"></i></a>
                                    </div>
                                </div>
                                <strong class="pl-2 text-success" id="balance">0000</strong>
                            </div>
                        </div>
                    @endif
                </div>
                <div class="d-flex flex-wrap justify-content-center mb-1 mt-2">
                    <div class="col-md-1 col-1 flex-wrap pr-0 text-center mb-2 pt-1">
                        <button type="submit" class="btn btn-sm btn-outline-info font-weight-bold d-flex" name="submit" id="submit"> {{__('obs.submit')}} </button>
                    </div> 
                </div> 
            </form>
            <hr>
            <div class="stickybutton rounded-lg" style="display: none" id="btn_print">
                <button class="btn btn-sm btn-warning btn-hover" style="font-size: 15px" onclick="$('#printThis').printThis();" type="button"><b>Print</b> &nbsp;<svg aria-hidden="true" style="height: 15px" focusable="false" data-prefix="far" data-icon="print" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-print fa-w-16"><path fill="currentColor" d="M400 264c-13.25 0-24 10.74-24 24 0 13.25 10.75 24 24 24s24-10.75 24-24c0-13.26-10.75-24-24-24zm32-88V99.88c0-12.73-5.06-24.94-14.06-33.94l-51.88-51.88c-9-9-21.21-14.06-33.94-14.06H110.48C93.64 0 80 14.33 80 32v144c-44.18 0-80 35.82-80 80v128c0 8.84 7.16 16 16 16h64v96c0 8.84 7.16 16 16 16h320c8.84 0 16-7.16 16-16v-96h64c8.84 0 16-7.16 16-16V256c0-44.18-35.82-80-80-80zM128 48h192v48c0 8.84 7.16 16 16 16h48v64H128V48zm256 416H128v-64h256v64zm80-112H48v-96c0-17.64 14.36-32 32-32h352c17.64 0 32 14.36 32 32v96z" class=""></path></svg></button>
            </div>
        </div>
    </div>

@endsection
@section('script')
@if($blade_info['type']==2)
{{-- For Editor --}}
<script src="{{asset('assets/vendor/nanoscroller/nanoscroller.js')}}"></script>
<script src="{{asset('assets/vendor/codemirror/lib/codemirror.js')}}"></script>
<script src="{{asset('assets/vendor/codemirror/addon/selection/active-line.js')}}"></script>
<script src="{{asset('assets/vendor/codemirror/addon/edit/matchbrackets.js')}}"></script>
<script src="{{asset('assets/vendor/codemirror/mode/javascript/javascript.js')}}"></script>
<script src="{{asset('assets/vendor/codemirror/mode/xml/xml.js')}}"></script>
<script src="{{asset('assets/vendor/codemirror/mode/htmlmixed/htmlmixed.js')}}"></script>
<script src="{{asset('assets/vendor/codemirror/mode/css/css.js')}}"></script>
<script src="{{asset('assets/vendor/summernote/summernote.js')}}"></script>
<script src="{{asset('assets/javascripts/theme.js')}}"></script>
<script src="{{asset('assets/javascripts/theme.custom.js')}}"></script>
<script src="{{asset('assets/javascripts/theme.init.js')}}"></script>
<script src="{{asset('assets/javascripts/forms/examples.advanced.form.js')}}"></script>
{{-- For Editor --}}
@endif
<script>
    const store_setting = @json(store_info());
</script>
    <script type="text/javascript" src="{{ asset('inventory/blade_js/common.js') }}"></script>
    <script>
        $(document).ready(()=> {
            partySearch('vendor_live', 1);
            partySearch('customer_live', 2);
            getBalance();
        });

        const disableParty = (party_id, id) => {
            $('#'+party_id).is(':checked') ? 
                $('#'+id).attr('disabled', true)                 
                    : $('#'+id).attr('disabled', false);
        }

        const getBalance = () => {
            const callback = (data) => {
                $('#balance').html(data.balance);
            }
            const link="{{route('sms.balance')}}";
            ajaxCall(link, 'GET', {}, callback);
        }
    </script>
@endsection