@extends('layouts.view')
@section('title',trans('lang.comm_ded'))
@section('links')
    <link href="{{asset('/plugins/select2/select2.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('plugins/sweet-alert2/sweetalert2.min.css')}}" rel="stylesheet" type="text/css">
@endsection
@section('content')

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="page-title-box">
                    <div class="float-right">
                        <a class="btn btn-primary" href="{{ route('comm_ded') }}"> {{trans('lang.back')}}</a>
                    </div>
                    <h4 class="page-title">{{trans('lang.comm_ded')}}</h4>
                </div><!--end page-title-box-->
            </div><!--end col-->
        </div><!--end row-->
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div id="viewtable">
                        <h4 class="mt-0 header-title">{{trans('lang.add_comm_ded')}} </h4>
                        <p>
                            @can('commission_deduction-create')
                        <td><a id="create_record" style=" margin-bottom:20px; color: #fff;" class="btn btn-primary px-5 py-2">{{trans('lang.add_comm_ded')}}</a></td>
                        @endcan
                        </p>

                        <table id="branch-table" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                            <tr>
                                <th>{{trans('lang.id')}}</th>
                                <th>{{trans('lang.empname')}}</th>
                                <th>{{trans('lang.operation_type')}}</th>
                                <th>{{trans('lang.the_date')}}</th>
                                @canany(['commission_deduction-edit','commission_deduction-delete'])
                                <th>{{trans('lang.edit')}}</th>
                                @endcanany

                            </tr>
                            </thead>
                        </table>
                    </div>


                    <div id="formDialog" style="display: none;" class="card-body">
                        <h4 class="mt-0 header-title" id="titleheadar"> :</h4>

                        <div class="row">
                            <div class="col-lg-10">
                                <span id="form_result"></span>
                                <form  class="form-horizontal row-fluid" id="sample_form" method="post"  enctype="multipart/form-data">
                                    @csrf

                                    <input type="hidden" name="id" id="id" value="0" />

                                    <div class="form-group row">


                                        <label class="col-sm-2 col-form-label text-right" for="basicinput"> {{trans('lang.empname')}}</label>

                                        <div class="col-sm-4">
                                            <select name="user_id" id="user_id" class="select2 mb-3 select2-hidden-accessible form-control" style="width: 100%">
                                                
                                            </select>
                                        </div>
                                        <label class="col-sm-2 col-form-label text-right" for="basicinput"> {{trans('lang.operation_type')}}</label>
                                        <div class="col-sm-4">
                                            <select class="form-control" name="type" id="type">

                                                <option value="Commission">{{trans('lang.commission')}}</option>
                                                <option value="Deduction">{{trans('lang.deduction')}}</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-sm-2 col-form-label text-right" for="basicinput"> {{trans('lang.amount')}}</label>

                                        <div class="col-sm-4">

                                            <input type="text" id="amount" name="amount"  placeholder="" class="form-control">

                                        </div>

                                        <label class="col-sm-2 col-form-label text-right" for="basicinput"> {{trans('lang.the_date')}}</label>

                                        <div class="col-sm-4">
                                            <input type="date" id="the_date" name="the_date" data-date-format="yyyy-mm-dd"  placeholder="" class="form-control">

                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-sm-2 col-form-label text-right" for="basicinput"> {{trans('lang.file_path')}}</label>

                                        <div class="col-sm-4">

                                            <input type="file" id="file_path" name="file_path"  placeholder="" class="form-control">

                                            <span id="store_file"></span>

                                        </div>
                                        <label class="col-sm-2 col-form-label text-right" for="basicinput"> {{trans('lang.the_reason')}}</label>

                                        <div class="col-sm-4">

                                            <textarea id="reason" name="reason"  placeholder="{{trans('lang.the_reason')}} ..." class="form-control"></textarea>

                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <input type="hidden" name="action" id="action" />
                                        <input type="hidden" name="hidden_id" id="hidden_id" />
                                        <div class="col-sm-10">

                                            <button type="submit" name="action_button" id="action_button" class="btn btn-primary" >{{ trans('lang.submit') }}</button>
                                            <button id="cancelForm" class="btn btn-danger">{{ trans('lang.back') }}</button>
                                        </div>
                                    </div>
                                </form>

                            </div></div></div>

                    <div id="confirmModal" class="modal fade" role="dialog">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h2 class="modal-title"></h2>
                                </div>
                                <div class="modal-body">
                                    <h4 align="center" style="margin:0;">{{ trans('lang.doyouwantdel') }}</h4>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" name="ok_button" id="ok_button" class="btn btn-danger">{{ trans('lang.ok') }}</button>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">{{ trans('lang.cancel') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>


            </div>
        </div> <!-- end col -->
    </div>
@endsection
@section('scripts')
    <script src="{{asset('/plugins/select2/select2.min.js')}}"></script>
    <script>
        // Select2
        $(".select2").select2({
            width: '100%'
        });
        $( ".datepicker" ).datepicker({
            dateFormat: 'yy-mm-dd'
        });
    </script>
<script>

    $(document).ready(function(){
        // var table = $('#datatable-buttons').DataTable();
  //      $('#expire_date').datepicker();
        var table = $('#branch-table').DataTable({
            lengthChange: false,
            buttons: ['copy', 'excel', 'pdf', 'colvis'],
            processing: true,
            serverSide: true,
            ajax:{
                url: "{{ route('comm_ded') }}",
            },
            columns:[
                {
                    data: 'id',
                    name: 'id',
                    orderable: false
                },
                {
                    data: 'user_name',
                    name: 'user_name'
                },
                {
                    data: 'type',
                    name: 'type'
                },
                {
                    data: 'the_date',
                    name: 'the_date'
                },
                @canany(['commission_deduction-edit','commission_deduction-delete'])
                {
                    data: 'action',
                    name: 'action',
                    orderable: false
                }
                @endcanany
            ],
        });
        table.buttons().container()
            .appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');

        $('#row_callback').DataTable( {
            "createdRow": function ( row, data, index ) {
                if ( data[5].replace(/[\$,]/g, '') * 1 > 150000 ) {
                    $('td', row).eq(5).addClass('highlight');
                }
            }
        } );

        $('#create_record').click(function(){
            $('#titleheadar').text("{{ trans('lang.add_comm_ded') }}");
            $('#action_button').val("Add");
            $('#action').val("Add");
            $('#formDialog').show();
            $('#viewtable').hide();
            document.getElementById('formDialog').style.display="block";
        });

        $('#sample_form').on('submit', function(event){
            event.preventDefault();
            if($('#action').val() == 'Add')
            {
                $.ajax({
                    url:"{{ route('comm_ded.store') }}",
                    method:"POST",
                    data: new FormData(this),
                    contentType: false,
                    cache:false,
                    processData: false,
                    dataType:"json",
                    success:function(data)
                    {
                        var html = '';
                        if(data.errors)
                        {
                            html = '<div class="alert alert-danger">';
                            for(var count = 0; count < data.errors.length; count++)
                            {
                                html += '<p>' + data.errors[count] + '</p>';
                            }
                            html += '</div>';
                        }
                        if(data.success)
                        {
                            html = '<div class="alert alert-success">' + data.success + '</div>';
                            $('#sample_form')[0].reset();
                            $('#store_file').html('');
                            $('#branch-table').DataTable().ajax.reload();
                        }
                        $('#form_result').html(html);
                    }
                })
            }

            if($('#action').val() == "Edit")
            {
                $.ajax({
                    url:"{{ route('comm_ded.update') }}",
                    method:"POST",
                    data:new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    dataType:"json",
                    success:function(data)
                    {
                        var html = '';
                        if(data.errors)
                        {
                            html = '<div class="alert alert-danger">';
                            for(var count = 0; count < data.errors.length; count++)
                            {
                                html += '<p>' + data.errors[count] + '</p>';
                            }
                            html += '</div>';
                        }
                        if(data.success)
                        {
                            //  alert('ddd00');
                            html = '<div class="alert alert-success">' + data.success + '</div>';
                            $('#sample_form')[0].reset();

                            $('#branch-table').DataTable().ajax.reload();
                        }
                        $('#form_result').html(html);
                    }
                });
            }
        });

        $(document).on('click', '.edit', function(){
            var id = $(this).attr('id');
            $('#titleheadar').text("{{ trans('lang.edit_comm_ded') }}");
            $('#form_result').html('');
            $.ajax({
                url:"comm_ded/"+id+"/edit",
                dataType:"json",
                success:function(html){
                    $('#user_id').val(html.data.user_id);
                    $('#type').val(html.data.type);
                    $('#amount').val(html.data.amount);
                    $('#the_date').val(html.data.the_date);
                    $('#reason').val(html.data.reason);
                    $('#hidden_id').val(html.data.id);
                    $('#store_file').html("<a target='_blank' href="+ html.url +">"+ html.url + "</a>");
                    $('#store_file').append("<input type='hidden' name='hidden_file' value='"+html.url+"' />");
                    $('#action_button').val("Edit");
                    $('#action').val("Edit");
                    $('#formDialog').show();
                    $('#viewtable').hide();
                    document.getElementById('formDialog').style.display="block"
                }
            })
        });

        var user_id;

        $(document).on('click', '.delete', function(){
            user_id = $(this).attr('id');
            $('#confirmModal').modal('show');
        });

        $('#ok_button').click(function(){
            $.ajax({
                url:"comm_ded/destroy/"+user_id,
                beforeSend:function(){
                    $('#ok_button').text('{{ trans('lang.deleting') }}');
                },
                success:function(data)
                {
                    setTimeout(function(){
                        $('#confirmModal').modal('hide');
                        $('#branch-table').DataTable().ajax.reload();
                    }, 2000);
                }
            })
        });

    });

</script>
@endsection