@extends('adminlte::page') @section('content')
<?php Fun::lang();?>
<style>
    .content-wrapper{
        height: 100% !important;
    }
</style>
@section('js')
<script type="text/javascript">
    var option_select = "{!! $product_option !!}";
    $(document).ready(function(){
        $("#datatable_ceremony").DataTable();
    });
    function add_promotion()
    {
        var tr = `
            <tr>
                <td>
                    <select name="product_name[]" class="form-control select2" onchange="select_product(this)" required>
                        ${option_select}
                    </select>
                </td>
                <td><input type="text" name="product_brand[]" class="form-control" placeholder="Product Brand" readonly></td>
                <td><input type="text" name="product_cost[]" class="form-control number-only input-cost" placeholder="Product Cost"></td>
                <td><input type="text" name="qty[]" class="form-control number-only input-qty" placeholder="Qty" onkeyup="calculate_amount(this)"></td>
                <td><input type="text" name="product_amount[]" class="form-control number-only input-amount" placeholder="Amount"></td>
                <td>
                    <textarea name="description_detail[]" class="form-control description-add" placeholder="Description"></textarea>
                </td>
                <td><span class="btn btn-sm btn-danger" onclick="$(this).closest('tr').remove()"><i class="fa fa-remove"></i></span></td>
            </tr>
            `;
        $(".resultbody").append(tr);
        $(".select2").select2();
    }
    function select_product(obj)
    {
        var brand = $(obj).find("option:selected").data("brand");
        $(obj).closest("tr").find("td:eq(1)").find("input").val(brand);
    }
    function calculate_amount(obj){
        var unit_cost = Number($(obj).closest('tr').find('td:eq(2)').find('input').val());
        var amount = 0;var total_amount = 0;var qty=0;
        if(unit_cost==0 || isNaN(unit_cost) || unit_cost=="" || unit_cost == null){
            $.confirm({
                title:'Please input unit cost.',
                content:'',
                theme:'modern',
                buttons:{
                    submit:{
                        btnClass:'btn btn-success',
                        text:"OK",
                        action:function () {
                            $(obj).val("");
                        }
                    },
                },
            });
            
        }else{
            qty = Number($(obj).val());
            amount = qty*unit_cost;
            $(obj).closest('tr').find('td:eq(4)').find('input').val(amount);
        }
        console.log(amount);
        $(".tr-promotion-edit").each(function () {

            total_amount = total_amount + Number($(this).find('td:eq(4)').find('input').val()); 
        });
        $(".input-total-amount-edit").val(total_amount);
    }
    function show_detail(obj)
    {
        $(".main-spinner").show();
        var promotion_id = $(obj).data("promotion_id");
        var route = "{{ route('promotion.promotion_detail',':id') }}";
        route = route.replace(":id",promotion_id);
        $.ajax({
            url:route,
            type:"GET",
            dataType:"json",
            success:function(data)
            {
                var tb_tr = "";
                var button = "";
                $.each(data,function(index,value)
                {
                    button = "";
                    @can('Promotion-Setup-Detail-Edit')
                    button += "<button title='Edit' style='margin-left:5px;' class='btn btn-sm btn-primary' data-status = '"+value.status+"' data-promotion_detail_id = '"+value.id+"' onclick='edit_promotion_detail(this)'><i class='fa fa-edit'></i></button>";
                    @endcan
                    if(value.status==0)
                    {
                        @can('Promotion-Setup-Detail-Delete')
                        button += "<button title='Delete' style='margin-left:5px;' class='btn btn-sm btn-danger' data-promotion_detail_id = '"+value.id+"' onclick='delete_promotion_detail(this)'><i class='fa fa-trash-o'></i></button>";
                        @endcan
                    }
                    tb_tr += `
                        <tr class='show-detail-${promotion_id}'>
                            <td>${index+1}</td>
                            <td>${value.product_name}</td>
                            <td>${value.product_unit_cost==null?"":("$"+value.product_unit_cost)}</td>
                            <td>${value.qty==null?"":(value.qty+"unit")} </td>
                            <td>${value.product_amount==null?"":("$"+value.product_amount)}</td>
                            <td>${value.qty_used} unit</td>
                            <td>${value.available==1?"Available":"Unavailable"}</td>
                            <td>${value.description==null?"":value.description}</td>
                            <td>${button}</td>
                        </tr>`;
                });
                var tr = `  <tr class='show-detail-${promotion_id}'>
                                <td colspan="9">
                                    <table class='table table-striped nowrap show-detail-${promotion_id}'>
                                        <tr class='show-detail-${promotion_id}'>
                                            <th colspan="9" style='text-align:center'><u>Show Detail</u></th>
                                        </tr>
                                        <tr class='show-detail-${promotion_id}'>
                                            <th>No</th>
                                            <th>Product name</th>
                                            <th>Unit Cost</th>
                                            <th>Qty</th>
                                            <th>Amount</th>
                                            <th>Qty Used</th>
                                            <th>Status</th>
                                            <th>Description</th>
                                            <th>Action</th>
                                        </tr>
                                        ${tb_tr}
                                    </table>
                                </td>
                            </tr>`;
                $(obj).closest("tr").after(tr);
                $("#close-show-"+promotion_id).css("display","inline");
                $(obj).css("display","none");
            },
            error:function(data)
            {

            },
            complete:function()
            {
                $(".main-spinner").hide();
            }
        });
    }
    function edit_promotion_detail(obj)
    {
        var promotion_detail_id = $(obj).data('promotion_detail_id');
        $("#main-spinner").show();
        var route = "{{ route('promotion.promotion_detail_get_info',':id') }}";
        route = route.replace(':id',promotion_detail_id);
        $.ajax({
            url:route,
            type:"GET",
            dataType:"JSON",
            success:function(data)
            {
                $("#edit-promotion-detail").modal("show");
                $("#promotion-detail-product").html(option_select);

                var option_product = $("#promotion-detail-product").find("option");
                var opt = ``;
                $.each(option_product,function(index,val)
                {
                    var value = $(val).val();
                    var text = $(val).text();
                    if(value==data.product_id)
                    {
                        opt += `<option value="${value}" selected>${text}</option>`;
                    }
                    else{
                        opt += `<option value="${value}">${text}</option>`;
                    }
                });
                $("#promotion-detail-product").html(opt);
                $("#promotion-detail-unit-cost").val(data.product_unit_cost);
                $("#promotion-detail-qty").val(data.qty);
                $("#promotion-detail-amount").val(data.product_amount);
                $("#promotion-detail-description").val((data.description==null?"":data.description));
                $("#promotion-detail-id").val(promotion_detail_id);
                if($(obj).data("status")==1){
                    $("#promotion-detail-unit-cost").attr("readonly",true);
                    $("#promotion-detail-amount").attr("readonly",true);
                }
                else{
                    $("#promotion-detail-unit-cost").attr("readonly",false);
                    $("#promotion-detail-amount").attr("readonly",false);
                }
            },
            complete:function()
            {
                $("#main-spinner").hide();
            }
        });
    }
    function close_show_detail(obj){
        $(obj).css("display","none");
        $("#show-"+$(obj).data("promotion_id")).css("display","inline");
        $("tr.show-detail-"+$(obj).data("promotion_id")).remove();
    }
    function edit_promotion(obj)
    {
        var promotion_id = $(obj).data("promotion_id");
        $("#main-spinner").show();
        var route = "{{ route('promotion.promotion_edit_info',':id') }}";
        route = route.replace(":id",promotion_id);
        $.ajax({
            url:route,
            type:"GET",
            dataType:"JSON",
            success:function(data)
            {
                $("#edit-promotion").modal("show");
                $("#edit-promotion-id").val(promotion_id);
                $("#edit-promotion-name").val(data.name);
                $("#edit-promotion-name").val(data.name);
                $("#edit-start-date").val(data.from_date.split('-')[2]+"-"+data.from_date.split('-')[1]+"-"+data.from_date.split('-')[0]);
                if(data.to_date!=null)
                {
                    $("#edit-finish-date").val(data.to_date.split('-')[2]+"-"+data.to_date.split('-')[1]+"-"+data.to_date.split('-')[0]);
                }
                $("#edit-date").val(data.date.split('-')[2]+"-"+data.date.split('-')[1]+"-"+data.date.split('-')[0]);
                var option_ceremonies = $("#edit-ceremony").find("option");
                var opt = ``;
                $.each(option_ceremonies,function(index,val)
                {
                    var value = $(val).val();
                    var text = $(val).text();
                    if(value==data.ceremony_id)
                    {
                        opt += `<option value="${value}" selected>${text}</option>`;
                    }
                    else{
                        opt += `<option value="${value}">${text}</option>`;
                    }
                });
                $("#edit-ceremony").html(opt);

                var option_projects = $("#edit-project").find("option");
                var opt_project = ``;
                $.each(option_projects,function(index,val)
                {
                    var value = Number($(val).val());
                    var text = $(val).text();
                    
                    if(value==data.project_id)
                    {
                        opt_project += `<option value="${value}" selected>${text}</option>`;
                    }
                    else{
                        opt_project += `<option value="${value}">${text}</option>`;
                    }
                });
                $("#edit-project").html(opt_project);
            },
            complete:function()
            {
                $("#main-spinner").hide();
            }
        });
    }
    function delete_promotion(obj)
    {
        var promotion_id = $(obj).data("promotion_id");
        $.confirm({
            title:'Are you sure ?',
            content:'',
            theme:'modern',
            buttons:{
                cancel:{
                    btnClass:'btn btn-primary',
                    text:'Cancel',
                    action:function () {

                    }
                },
                submit:{
                    btnClass:'btn btn-danger',
                    text:"Delete",
                    action:function () {
                            window.location.replace('{{route("promotion.promotion_delete")}}?id='+promotion_id);
                    }
                },
            },
        });
    }
    function add_product_promotion(obj)
    {
        var promotion_id = $(obj).data('promotion_id');
        $("#add-new-promotion-detail").modal("show");
        $("#add-promotion-id").val(promotion_id);
    }
    function increase_date_promotion(obj)
    {
        var promotion_id = $(obj).data("promotion_id");
        var date_finish = $(obj).data("finish_date");
        $("#increase-finish-date-promotion").modal("show");
        $("#increase-finish-date-promotion-id").val(promotion_id);
        if(date_finish!="")
            $("#increase-finish-date").val(date_finish.split('-')[0]+"-"+date_finish.split('-')[1]+"-"+date_finish.split('-')[2]);
    }
    function close_promotion(obj)
    {
        var promotion_id = $(obj).data("promotion_id");
        $.confirm({
            title:'Are you sure ?',
            content:'',
            theme:'modern',
            buttons:{
                cancel:{
                    btnClass:'btn btn-primary',
                    text:'NO',
                    action:function () {

                    }
                },
                submit:{
                    btnClass:'btn btn-danger',
                    text:"YES",
                    action:function () {
                        $("#close-promotion").modal("show");
                        $("#close-promotion-id").val(promotion_id);
                    }
                },
            },
        });
    }
    function delete_promotion_detail(obj)
    {
        var promotion_detail_id = $(obj).data('promotion_detail_id');
        $.confirm({
            title:'Are you sure ?',
            content:'',
            theme:'modern',
            buttons:{
                cancel:{
                    btnClass:'btn btn-primary',
                    text:'Cancel',
                    action:function () {

                    }
                },
                submit:{
                    btnClass:'btn btn-danger',
                    text:"Delete",
                    action:function () {
                            window.location.replace('{{route("promotion.promotion_detail_delete")}}?id='+promotion_detail_id);
                    }
                },
            },
        });
    }
</script>
@endsection
<div class="modal fade bs-modal-lg" id="add-new-promotion-detail" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-dialog modal-lg modal-lg" style="width: 60%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h3>Add New Product To Promotion</h3>
            </div>
            <br />
            <form class="form-horizontal" role="form" action="{{ route('promotion.promotion_add_new_product') }}" method="post">
                @csrf
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-sm-6">
                            <label class="required">Product</label>
                            <select name="product" id="add-promotion-detail-product" class="form-control select2" required>
                                {!! $product_option !!}
                            </select>
                        </div>
                        <div class="col-sm-6">
                            <label class="required">Unit Cost ($)</label>
                            <input type="text" name="unit_cost" class="form-control" placeholder="Product Name" id="add-promotion-detail-unit-cost" required>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-sm-6">
                            <label class="required">Qty</label>
                            <input type="text" name="qty" class="form-control number-only" placeholder="Qty" id="add-promotion-detail-qty" required>
                        </div>
                        <div class="col-sm-6">
                            <label>Amount ($)</label>
                            <input type="text" name="amount" class="form-control number-only" id="add-promotion-detail-amount" placeholder="Amount" required>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-sm-6">
                            <label>Description</label>
                            <textarea class="form-control" name="description" id="add-promotion-detail-description"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <br/>
                    <input type="hidden" name="promotion_id" id="add-promotion-id">
                    <button type="button" data-dismiss="modal" class="button_danger"><i class="fa fa-close"></i> No</button>
                    <button type="submit" class="button_success" data-toggle="modal"><i class="fa fa-save"></i> Save</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div class="modal fade bs-modal-lg" id="edit-promotion-detail" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-dialog modal-lg modal-lg" style="width: 60%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h3>Edit Promotion Detail</h3>
            </div>
            <br />
            <form class="form-horizontal" role="form" action="{{ route('promotion.promotion_detail_update') }}" method="post">
                @csrf
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-sm-6">
                            <label class="required">Product</label>
                            <select name="product" id="promotion-detail-product" class="form-control select2" required>

                            </select>
                        </div>
                        <div class="col-sm-6">
                            <label>Unit Cost ($)</label>
                            <input type="text" name="unit_cost" class="form-control" placeholder="Product Name" id="promotion-detail-unit-cost" >
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-sm-6">
                            <label>Qty</label>
                            <input type="text" name="qty" class="form-control number-only" placeholder="Qty" id="promotion-detail-qty" >
                        </div>
                        <div class="col-sm-6">
                            <label>Amount ($)</label>
                            <input type="text" name="amount" class="form-control number-only" id="promotion-detail-amount" placeholder="Amount">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-sm-6">
                            <label>Description</label>
                            <textarea class="form-control" name="description" id="promotion-detail-description"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <br/>
                    <input type="hidden" name="promotion_detail_id" id="promotion-detail-id">
                    <button type="button" data-dismiss="modal" class="button_danger"><i class="fa fa-close"></i> No</button>
                    <button type="submit" class="button_success" data-toggle="modal"><i class="fa fa-save"></i> Save</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div class="modal fade bs-modal-lg" id="create-promotion" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-dialog modal-lg modal-lg" style="width: 80%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h3>Create Promotion</h3>
            </div>
            <br />
            <form class="form-horizontal" role="form" action="{{ route('promotion.promotion_store') }}" method="post">
                @csrf
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-sm-6">
                            <label class="required">Promotion Name</label>
                            <input type="text" name="name" class="form-control" placeholder="Product Name" required>
                        </div>
                        <div class="col-sm-6">
                            <label class="required">Ceremony</label>
                            {!! Form::select('ceremony', $ceremony,null, array('class' => 'form-control select2','required')) !!}
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-sm-6">
                            <label class="required">Start Date</label>
                            <input type="text" name="start_date" class="form-control date_picker" placeholder="Start Date" required>
                        </div>
                        <div class="col-sm-6">
                            <label>Finish Date</label>
                            <input type="text" name="finish_date" class="form-control date_picker" placeholder="Finish Date">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-sm-6">
                            <label class="required">Date</label>
                            <input type="text" name="date" class="form-control date_picker" value="{{ date('d-m-Y') }}" placeholder="Date" required>
                        </div>
                        <div class="col-sm-6">
                            <label class="required">Project</label>
                            {!! Form::select('project_id',$projects,null,array('class'=>'form-control select2','required')) !!}
                        </div>
                    </div>
                </div>
                <div class="row" style="padding: 15px;">
                    <div class="col-md-12">
                        <table class="table table-striped table-bordered" id="create-promotion-table">
                            <thead>
                            <tr>
                                <th width="200px" class="required">Product Name</th>
                                <th>Brand</th>
                                <th class="required">Unit Cost($)</th>
                                <th class="required">Qty</th>
                                <th>Amount($)</th>
                                <th style="width: 30%;">Description</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody class="resultbody">
                            <tr>
                                <td>
                                    <select name="product_name[]" class="form-control select2" onchange="select_product(this)" required>
                                        {!! $product_option !!}
                                    </select>
                                </td>
                                <td><input type="text" name="product_brand[]" class="form-control" placeholder="Product Brand" readonly></td>
                                <td><input type="text" name="product_cost[]" class="form-control number-only input-cost" placeholder="Product Cost"></td>
                                <td><input type="text" name="qty[]" class="form-control number-only input-qty" placeholder="Qty" onkeyup="calculate_amount(this)"></td>
                                <td><input type="text" name="product_amount[]" class="form-control number-only input-amount" placeholder="Amount"></td>
                                <td>
                                    <textarea name="description_detail[]" class="form-control description-add" placeholder="Description"></textarea>
                                </td>
                                <td><span class="btn btn-sm btn-primary" onclick="add_promotion()"><i class="fa fa-plus"></i></span></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <br/>
                    <button type="button" data-dismiss="modal" class="button_danger"><i class="fa fa-close"></i> No</button>
                    <button type="submit" class="button_success" data-toggle="modal"><i class="fa fa-save"></i> Save</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div class="modal fade bs-modal-lg" id="edit-promotion" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-dialog modal-lg modal-lg" style="width: 80%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h3>Edit Promotion</h3>
            </div>
            <br />
            <form class="form-horizontal" role="form" action="{{ route('promotion.promotion_update') }}" method="post">
                @csrf
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-sm-6">
                            <label class="required">Promotion Name</label>
                            <input type="text" name="name" class="form-control" placeholder="Product Name" id="edit-promotion-name" required>
                        </div>
                        <div class="col-sm-6">
                            <label class="required">Ceremony</label>
                            {!! Form::select('ceremony', $ceremony,null, array('class' => 'form-control select2','required','id'=>'edit-ceremony')) !!}
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-sm-6">
                            <label class="required">Start Date</label>
                            <input type="text" name="start_date" class="form-control date_picker" placeholder="Start Date" id="edit-start-date" required>
                        </div>
                        <div class="col-sm-6">
                            <label>Finish Date</label>
                            <input type="text" name="finish_date" class="form-control date_picker" id="edit-finish-date" placeholder="Finish Date">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-sm-6">
                            <label class="required">Date</label>
                            <input type="text" name="date" class="form-control date_picker" value="{{ date('d-m-Y') }}" id="edit-date" placeholder="Date" required>
                        </div>
                        <div class="col-sm-6">
                            <label class="required">Project</label>
                            {!! Form::select('project_id',$projects,null,array('class'=>'form-control select2','required','id'=>'edit-project')) !!}
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <br/>
                    <input type="hidden" name="id" id="edit-promotion-id">
                    <button type="button" data-dismiss="modal" class="button_danger"><i class="fa fa-close"></i> No</button>
                    <button type="submit" class="button_success" data-toggle="modal"><i class="fa fa-save"></i> Save</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div class="modal fade bs-modal-md" id="increase-finish-date-promotion" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-dialog modal-md modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h3>Increase Finish Date Promotion</h3>
            </div>
            <br />
            <form class="form-horizontal" role="form" action="{{ route('promotion.promotion_update_finish_date') }}" method="post">
                @csrf
                <div class="col-md-12" style="padding: 10px;">
                    <label class="required">Finish Date</label>
                    <input type="text" name="finish_date" class="form-control date_picker" id="increase-finish-date" placeholder="Finish Date" required>
                </div>
                <div class="modal-footer">
                    <br/>
                    <input type="hidden" name="id" id="increase-finish-date-promotion-id">
                    <button type="button" data-dismiss="modal" class="button_danger"><i class="fa fa-close"></i> No</button>
                    <button type="submit" class="button_success" data-toggle="modal"><i class="fa fa-save"></i> Save</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div class="modal fade bs-modal-md" id="close-promotion" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-dialog modal-md modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h3>Close Promotion</h3>
            </div>
            <br />
            <form class="form-horizontal" role="form" action="{{ route('promotion.promotion_close') }}" method="post">
                @csrf
                <div class="col-md-12" style="padding: 10px;">
                    <label>Date</label>
                    <input type="text" name="close_date" class="form-control date_picker" id="close-date" placeholder="Close Date" value="{{ date("d-m-Y") }}">
                </div>
                <div class="modal-footer">
                    <br/>
                    <input type="hidden" name="id" id="close-promotion-id">
                    <button type="button" data-dismiss="modal" class="button_danger"><i class="fa fa-close"></i> No</button>
                    <button type="submit" class="button_success" data-toggle="modal"><i class="fa fa-save"></i> Save</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div class="title-page">
    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
            <li><a href="#">Operation</a></li>
            <li><a href="#">Promotion</a></li>
            <li><a href="#">Promotion List</a></li>
        </ul>
    </div>
</div>
    <div class="page">
        <div class="top-content">
            <div class="row">
                <div class="col-sm-12 col-xs-12">
                    <div class="title-page">
                        <div class="pull-left">
                            <h3>Promotion List</h3>
                        </div>
                    </div>
                    <div class="pull-right">
                        @can('Promotion-Setup-Create')
                        <a class="button_sm button_primary" href="#create-promotion" data-toggle="modal"><span class="fa fa-plus"></span>  Create New</a>
                        @endcan
                    </div>
                </div>
            </div>
        </div>
        <div class="box-body table-responsive">
                        
            <table id="datatable_ceremony" class="table table-striped table-bordered table-hover nowrap">
                <thead>
                    <tr>
                        <th>NO</th>
                        <th>Name</th>
                        <th>Ceremony</th>
                        <th>Project</th>
                        <th>Total Amount</th>
                        <th>Start Date</th>
                        <th>Finish Date</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {!! $tr !!}
                </tbody>
            </table>
        </div>
    </div>
    @endsection
<style>
    .modal-lg {
        width: 800px;
    }
</style>
