@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('css')
<style type="text/css">
    .x_content h1 {font-size:1.2em; margin:0; font-weight:bold}
    .x_content hr {margin:7px 0 15px;}
</style>
@endsection
@section('body_content')
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">        	
            <div class="page-title">
                <div class="title_left">
                    <h3>New Broadcast Apppush</h3>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-md-7">
                    <div class="x_panel">
                        <div class="x_content">
                            <h1>Customer</h1>
                            <hr>

                            <form class="form form-horizontal" id="form-customer">
                                <div class="form-group">
                                    <label class="control-label col-md-3">Search by :</label>
                                    <div class="col-md-9">
                                        <select class="form-control input-searchby" name="searchby">
                                            <option value="" data-formgroupperiod="false">- Search by -</option>
                                            <option value="customer_id" data-formgroupperiod="false">Customer ID</option>
                                            <option value="lakuemas_balance" data-formgroupperiod="false">Lakuemas balance</option>
                                            <option value="lakutitipan_balance" data-formgroupperiod="false">Laku titipan balance</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group hidden form-group-period">
                                    <label class="control-label col-md-3">Period :</label>
                                    <div class="col-md-4"><input type="date" class="form-control" placeholder="Start period" value="{{ date("Y-m-d") }}" name="start_date"></div>
                                    <div class="col-md-1 text-center"><p class="form-control-static">-</p></div>
                                    <div class="col-md-4"><input type="date" class="form-control" placeholder="End period"  value="{{ date("Y-m-d") }}" name="end_date"></div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3">Query :</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control" placeholder="Query" name="query">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-md-9 col-md-offset-3">
                                        <div class="loading hidden"><i class="fa fa fa-spinner fa-pulse"></i></div>
                                        <div class="submit">
                                            <button class="btn btn-default"><i class="fa fa-plus" aria-hidden="true"></i> Add</button>
                                        </div>
                                    </div>
                                </div>
                            </form>                            
                        </div>
                    </div>                    
                </div>

                <div class="col-xs-12 col-md-5">
                    <div class="x_panel">
                        <div class="x_content">
                            <h1>Broadcast</h1>
                            <hr>
                            <form class="form form-horizontal" id="form-broadcast">
                                <div class="form-group">
                                    <label class="control-label col-md-3">Title :</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control input-title" placeholder="Broadcast title">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3">Body :</label>
                                    <div class="col-md-9">
                                        <textarea class="form-control input-body" placeholder="Broadcast body" name="body" rows="5"></textarea>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3">Total reached customer :</label>
                                    <div class="col-md-9">
                                        <p class="form-control-static p-total-customer">0</p>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-md-9 col-md-offset-3">
                                        <div class="loading hidden"><i class="fa fa fa-spinner fa-pulse"></i></div>
                                        <div class="submit">
                                            <button class="btn btn-default"><i class="fa fa-check" aria-hidden="true"></i> Save</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-xs-12">
                    <div class="x_panel">
                        <div class="x_content">
                            <h1>Reached customer</h1>
                            <hr>
                            <div style="overflow-y:scroll; height:700px; padding-right:15px;">
                                <table class="table table-bordered table-striped table-customer">
                                    <thead>
                                        <tr>
                                            <th class="text-center">ID</th>
                                            <th class="text-center">Code</th>
                                            <th>Name</th>
                                            <th class="text-center">Handphone</th>
                                            <th class="text-center">Email</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="nodata">
                                            <td colspan="6" class="text-center">No data</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

@section("scripts")
<script type="text/javascript">
    function change_customer_searchby() {
        $("#form-customer").find(".form-group-period").addClass("hidden");
        if($(this).find("option:selected").attr("data-formgroupperiod") == "true") $("#form-customer").find(".form-group-period").removeClass("hidden");
    }

    function get_customer() {
        $("#form-customer").find(".loading").removeClass("hidden");
        $("#form-customer").find(".submit").addClass("hidden");
        $.ajax({
            url: 'new/get_customer',
            method: "POST",
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            data: $("#form-customer").serialize(),
            success: function(response) {
                $(".table-customer").find("tbody").find(".nodata").remove();
                $(".table-customer").find("tr").removeClass("info");
                $.each(response.customers, function( index, value ) {
                    var html_prepend = "<tr class='info' data-id='"+value.id+"'>";
                        html_prepend += "<td class='text-center'>"+value.id+"</td>";
                        html_prepend += "<td class='text-center'>"+value.code+"</td>";
                        html_prepend += "<td>"+value.name+"</td>";
                        html_prepend += "<td class='text-center'>"+value.handphone+"</td>";
                        html_prepend += "<td class='text-center'>"+value.email+"</td>";
                        html_prepend += "<td class='text-center'><button class='btn btn-default btn-xs btn-delete'><i class='fa fa-trash-o'></i></button></td>";
                    html_prepend += "</tr>";
                    $(".table-customer").find("tbody").prepend(html_prepend);
                });
                alert(response.customers.length + " Data added");
                $("#form-broadcast").find(".p-total-customer").html($(".table-customer").find("tbody").find("tr").length);
                $("#form-customer").find(".loading").addClass("hidden");
                $("#form-customer").find(".submit").removeClass("hidden");
            },
            error: function(response) {
                var response = response.responseJSON;
                alert(response.message);
                $("#form-customer").find(".loading").addClass("hidden");
                $("#form-customer").find(".submit").removeClass("hidden");
            }
        })
        return false;
    }

    function delete_customer() {
        $(this).parents("tr").remove();
        $("#form-broadcast").find(".p-total-customer").html($(".table-customer").find("tbody").find("tr").length);
    }

    function save_data() {
        var customers = [];
        $($(".table-customer").find("tbody").find("tr")).each(function(index) {
            customers.push($(this).data("id"));
        });

        $("#form-broadcast").find(".loading").removeClass("hidden");
        $("#form-broadcast").find(".submit").addClass("hidden");
        $.ajax({
            url: 'new/save',
            method: "POST",
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            data: {
                "customers": customers,
                "title": $("#form-broadcast").find(".input-title").val(),
                "body": $("#form-broadcast").find(".input-body").val()
            },
            success: function(response) {                        
                alert("You will be redirected to detail page");
                location.href = "/broadcast/apppush/" + response.id;
            },
            error: function(response) {
                var response = response.responseJSON;
                alert(response.message);
                $("#form-broadcast").find(".loading").addClass("hidden");
                $("#form-broadcast").find(".submit").removeClass("hidden");
            }
        });
        
        return false;
    }

    $(document).ready(function() {
        $("#form-customer").find(".input-searchby").on("change", change_customer_searchby);
        $("#form-customer").on("submit", get_customer);
        $(".table-customer").on("click", ".btn-delete", delete_customer);
        $("#form-broadcast").on("submit", save_data);
    });
</script>
@endsection