@extends('layouts.admin')

@section('title', 'Person')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('thana.index') }}">Thana</a></li>
<li class="breadcrumb-item"><a href="{{ route('union.index', $union_id) }}">Union</a></li>
@endsection

@section('button')
<button class="btn btn-success btn-icon float-right" type="button" id="add_new"><i class="zmdi zmdi-plus"></i></button>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Exportable Table -->
    <div class="row clearfix">
        <div class="col-lg-12">
            <div class="card">

                <div class="header">
                    <h2><strong>Person </strong> List </h2>
                </div>
                <div class="body">
                    <div class="table-responsive">
                        <table id="person_table" class="table table-bordered table-hover w-100">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Category</th>
                                    <th>Name</th>
                                    <th>Designation/Area</th>
                                    <th>Phone Number</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>#</th>
                                    <th>Category</th>
                                    <th>Name</th>
                                    <th>Designation/Area</th>
                                    <th>Phone Number</th>
                                    <th>Action</th>
                                </tr>
                            </tfoot>
                            
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="person_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content position-relative">
            <div id="person_modal_loader" class="loader-popup" style="display: none;">
                <img src="{{ url('assets/images/loader.gif')}}">
            </div>
            <div class="modal-header">
                <h4 id="person_modal_title" class="title">Add Person</h4>
            </div>
            <form id="person_form" method="post">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="union_id" value="{!! $union_id !!}">

                    <div class="form-group form-float">
                        <label>Category</label>
                        <select class="form-control" name="category_id" id="category_id">
                            
                        </select>
                        <div id="category_error"></div>
                    </div>

                    <div class="form-group form-float">
                        <label>Name</label>
                        <input type="text" class="form-control" placeholder="Person name" id="name" name="name">
                        <div id="name_error"></div>
                    </div>

                    <div class="form-group form-float">
                        <label>Designation/Area</label>
                        <input type="text" class="form-control" placeholder="Designation/Area" id="designation" name="designation">
                        <div id="designation_error"></div>
                    </div>

                    <div class="form-group form-float">
                        <label>Phone Number</label>
                        <input type="text" class="form-control" placeholder="+8801911418642" id="phone" name="phone" value="+88">
                        <div id="phone_error"></div>
                    </div>

                </div>
                <div class="modal-footer">
                    <input type="hidden" name="action" id="action" />
                    <input type="hidden" name="hidden_id" id="hidden_id" />
                    <button type="submit" name="action_button" id="action_button" class="btn btn-primary waves-effect">Save</button>
                    
                    <button type="button" class="btn btn-danger waves-effect" data-dismiss="modal">CLOSE</button>
                </div>
            </form>
        </div>

    </div>
</div>
<div id="confirm_modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="confirm_loader" class="loader-popup" style="display: none;">
                <img src="{{ url('assets/images/loader.gif')}}">
            </div>
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h2 class="modal-title">Confirmation</h2>
            </div>
            <div class="modal-body">
                <h4 align="center" style="margin:0;">Are you sure you want to remove this data?</h4>
            </div>
            <div class="modal-footer">
                <button type="button" name="ok_button" id="ok_button" class="btn btn-danger">Delete</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- Jquery DataTable Plugin Js --> 
<script src="{{ asset('assets/bundles/datatablescripts.bundle.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-datatable/buttons/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-datatable/buttons/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-datatable/buttons/buttons.colVis.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-datatable/buttons/buttons.flash.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-datatable/buttons/buttons.html5.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-datatable/buttons/buttons.print.min.js') }}"></script>

<!-- SweetAlert Plugin Js --> 
<script src="{{ asset('assets/plugins/sweetalert/sweetalert.min.js') }}"></script>


<script src="{{ asset('assets/plugins/jquery-validation/jquery.validate.js') }}"></script> <!-- Jquery Validation Plugin Css --> 
<script src="{{ asset('assets/plugins/jquery-steps/jquery.steps.js') }}"></script> <!-- JQuery Steps Plugin Js --> 

<script src="{{ asset('assets/bundles/mainscripts.bundle.js') }}"></script><!-- Custom Js --> 
<script src="{{ asset('assets/js/pages/tables/jquery-datatable.js') }}"></script>

<script src="{{ asset('assets/js/pages/forms/form-validation.js') }}"></script>




<script>

    var SITEURL = '{{URL::to('')}}';

    $('#add_new').click(function() {
        $.ajax({
            type:"GET",
            url:"{{ route('category.all') }}",
            success:function(data){               
                if(data){
                    $("#category_id").empty();
                    $('.get-category').remove();
                    $("#category_id").append('<option selected disabled value="">--select one--</option>');
                    $("#category_id").append(data.category);

                }else{
                    $("#category_id").empty();
                }
            }
        }); 


        $('#person_form')[0].reset();

        $('#category_error').html('');
        $('#name_error').html('');
        $('#designation_error').html('');
        $('#phone_error').html('');

        $('#person_modal_title').text("Add Person");
        $('#action_button').html("Save");
        $('#action').val("Add");
        $('#person_modal').modal('show');
    });

    $('#category_id').on('change', function() {
        if($(this).val() != ''){
            $('#category_error').html('');
        }
    });

    $('#name').keyup(function() {
        if($(this).val() != ''){
            $('#name_error').html('');
        }
    });

    $('#designation').keyup(function() {
        if($(this).val() != ''){
            $('#designation_error').html('');
        }
    });

    $('#phone').keyup(function() {
        if($(this).val() != ''){
            $('#phone_error').html('');
        }
    });

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    var union_id = {{ $union_id }};

    $('#person_table').DataTable({
        processing: true,
        serverSide: true,
        language: {
            processing: "<img src='{{ url('assets/images/loader.gif')}}'>",
        },
        ajax:{
            url: SITEURL+"/union/"+union_id+"/person",
        },
        columns:[
        {
            data: 'DT_RowIndex', 
            name: 'DT_RowIndex', 
            orderable: false,
            searchable: false
        },
        {
            data: 'category',
            name: 'category'
        },
        {
            data: 'name',
            name: 'name'
        },
        {
            data: 'designation',
            name: 'designation'
        },
        {
            data: 'phone',
            name: 'phone'
        },
        {
            data: 'action',
            name: 'action',
            orderable: false
        }
        ]
    });

    $('#person_form').on('submit', function(event){
        event.preventDefault();
        if($('#action').val() == 'Add')
        {
            $.ajax({
                url: "{{ route('person.store') }}",
                type:'post',
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                dataType: 'json',
                beforeSend: function(){
                    $('#person_modal_loader').show();
                },
                success:function(data)
                {
                    $('#person_modal_loader').hide();
                    if(data.errors)
                    {
                        $('#category_error').html('<span style="color:red">'+data.errors.category_id+'</span>');
                        $('#name_error').html('<span style="color:red">'+data.errors.name+'</span>');
                        $('#designation_error').html('<span style="color:red">'+data.errors.designation+'</span>');
                        $('#phone_error').html('<span style="color:red">'+data.errors.phone+'</span>');
                    }
                    if(data.success)
                    {
                        $('#person_form')[0].reset();
                        $('#person_table').DataTable().ajax.reload();
                        $('#person_modal').modal('hide');
                    }

                }
            });
        }

        if($('#action').val() == 'Edit')
        {
            $.ajax({
                url: "{{ route('person.update') }}",
                type:'post',
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                dataType: 'json',
                beforeSend: function(){
                    $('#person_modal_loader').show();
                },
                success:function(data)
                {
                    $('#person_modal_loader').hide();
                    if(data.errors)
                    {
                        $('#category_error').html('<span style="color:red">'+data.errors.category_id+'</span>');
                        $('#name_error').html('<span style="color:red">'+data.errors.name+'</span>');
                        $('#designation_error').html('<span style="color:red">'+data.errors.designation+'</span>');
                        $('#phone_error').html('<span style="color:red">'+data.errors.phone+'</span>');
                    }
                    if(data.success)
                    {
                        $('#person_form')[0].reset();
                        $('#person_table').DataTable().ajax.reload();
                        $('#person_modal').modal('hide');
                    }

                }
            });
        }


    });

    $(document).on('click', '.edit', function(){
        var id = $(this).attr('id');

        //$("#category_id").empty();
        //$('.get-category').remove();

        $('#category_error').html('');
        $('#name_error').html('');
        $('#designation_error').html('');
        $('#phone_error').html('');

        $('#person_modal').modal('show');
        $.ajax({
            url: SITEURL+"/person/"+id+"/edit",
            dataType:"json",
            beforeSend: function(){
                $('#person_modal_loader').show();
            },
            success:function(data){
                
                $("#category_id").html(data.category)
                $('#name').val(data.person.name);
                $('#designation').val(data.person.designation);
                $('#phone').val(data.person.phone);
                $('#hidden_id').val(data.person.id);

                $('#person_modal_title').text("Edit Person");
                $('#action_button').html("Save");
                $('#action').val("Edit");
                $('#person_modal_loader').hide();
            }
        })
    });

    var person_id;

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

    $('#ok_button').click(function(){
        $.ajax({
            url: SITEURL+"/person/"+person_id,
            method: "DELETE",
            beforeSend:function(){
                $('#confirm_loader').show();
            },
            success:function(data)
            {
                swal({
                    title: "Success",
                    text: " A Person has been successfullt deleted!",
                    icon: "success",
                    button: "Ok!",
                }).then((value) => {
                    $('#person_table').DataTable().ajax.reload();
                    $('#confirm_loader').hide();
                    $('#confirm_modal').modal('hide');
                });
            }
        })
    });


</script>

@endsection