@extends('admin.layout.master')
@section('title','SMS')
@section('custom_style') 
    <link href="{{asset('assets/css/custom_print.css')}}" rel="stylesheet"/>
@endsection
@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 >Short Message Service (SMS)</h4>
            </div>
        </div>
        <div class="card-body">
            <form method="post" name="form" id="form" action="{{ route('sms.send') }}">
                @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">All 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">All Customer</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="is_schedule" id="is_schedule" onchange="$('#is_schedule').is(':checked') ? $('#date_div').show('slow') : $('#date_div').hide('slow');">
                                <label for="is_schedule">Create Schedule</label>
                            </div>
                            {{-- <div class="col-md-4"></div>
                            <div class="col-md-2">
                                <div class="card p-2">
                                    <div class="d-flex">
                                        <div class="col-9 px-0">
                                            <h6 for="">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> --}}
                        </div>
                        <div class="d-flex flex-wrap mb-1">
                            <div class="col-md-4 col-12 flex-wrap pr-0 mb-2">
                                <label for="vendor_id">Vendor</label>
                                <select class="form-control 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">Customer</label>
                                <select class="form-control 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">Schedule Date</label>
                                <input type="text" class="form-control date_picker" name="schedule_date" id="schedule_date" value="{{date('d-m-Y')}}">
                            </div> 
                            <div class="col-md-12 col-12 flex-wrap pr-0 mb-2">
                                <label for="text">Text</label>
                                <textarea type="text" name="text" id="text" class="form-control" rows="3"> </textarea>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="card p-2">
                            <div class="d-flex">
                                <div class="col-9 px-0">
                                    <h6 for="">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>
                </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"> 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')
<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);
            }
            ajaxCall('/sms/balance', 'GET', {}, callback);
        }
    </script>
@endsection