@extends('layouts.admin')

@section('title', 'Police')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('thana.index') }}">Thana</a></li>
<li class="breadcrumb-item"><a href="{{ route('station.index', $station_id) }}">Police Station</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>Police</strong> List </h2>
                </div>
                <div class="body">
                    <div class="table-responsive">
                        <table id="police_table" class="table table-bordered table-hover w-100">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Designation</th>
                                    <th>Phone Number</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Designation</th>
                                    <th>Phone Number</th>
                                    <th>Action</th>
                                </tr>
                            </tfoot>
                            
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="police_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content position-relative">
            <div id="police_modal_loader" class="loader-popup" style="display: none;">
                <img src="{{ url('assets/images/loader.gif')}}">
            </div>
            <div class="modal-header">
                <h4 id="police_modal_title" class="title">Add Police Station</h4>
            </div>
            <form id="police_form" method="post">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="station_id" value="{!! $station_id !!}">

                    <div class="form-group form-float">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" placeholder="Police Station Name" id="name" name="name">
                        <div id="name_error"></div>
                    </div>
                    <div class="form-group form-float">
                        <label for="designation">Designation</label>
                        <input type="text" class="form-control" placeholder="i.e. সার্কেল এসপি" id="designation" name="designation">
                        <div id="designation_error"></div>
                    </div>
                    <div class="form-group form-float">
                        <label for="phone">Phone Number</label>
                        <input type="text" class="form-control" placeholder="+8801911418642" id="phone" name="phone">
                        <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() {
        $('#police_form')[0].reset();

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

        $('#police_modal_title').text("Add Police");
        $('#action_button').html("Save");
        $('#action').val("Add");
        $('#police_modal').modal('show');
    });

    $('#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 station_id = {{ $station_id }};

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

    $('#police_form').on('submit', function(event){
        event.preventDefault();
        if($('#action').val() == 'Add')
        {
            $.ajax({
                url: "{{ route('station-police.store') }}",
                type:'post',
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                dataType: 'json',
                beforeSend: function(){
                    $('#police_modal_loader').show();
                },
                success:function(data)
                {
                    $('#police_modal_loader').hide();
                    if(data.errors)
                    {
                        $('#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)
                    {
                        $('#police_form')[0].reset();
                        $('#police_table').DataTable().ajax.reload();
                        $('#police_modal').modal('hide');
                    }

                }
            });
        }

        if($('#action').val() == 'Edit')
        {
            $.ajax({
                url: "{{ route('station-police.update') }}",
                type:'post',
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                dataType: 'json',
                beforeSend: function(){
                    $('#police_modal_loader').show();
                },
                success:function(data)
                {
                    $('#police_modal_loader').hide();
                    if(data.errors)
                    {
                        $('#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)
                    {
                        $('#police_form')[0].reset();
                        $('#police_table').DataTable().ajax.reload();
                        $('#police_modal').modal('hide');
                    }

                }
            });
        }

    });



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

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

        $('#police_modal').modal('show');
        $.ajax({
            url: SITEURL+"/station/police/"+id+"/edit",
            dataType:"json",
            beforeSend: function(){
                $('#police_modal_loader').show();
            },
            success:function(data){
                $('#name').val(data.police.name);
                $('#designation').val(data.police.designation);
                $('#phone').val(data.police.phone);
                $('#hidden_id').val(data.police.id);

                $('#police_modal_title').text("Edit Police");
                $('#action_button').html("Save");
                $('#action').val("Edit");
                $('#police_modal_loader').hide();
            }
        })
    });

    var police_id;

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

    $('#ok_button').click(function(){
        $.ajax({
            url: SITEURL+"/station/police/"+police_id,
            method: "DELETE",
            beforeSend:function(){
                $('#confirm_loader').show();
            },
            success:function(data)
            {
                swal({
                    title: "Success",
                    text: "Police infomation has been successfully deleted",
                    icon: "success",
                    button: "Ok!",
                }).then((value) => {
                    $('#police_table').DataTable().ajax.reload();
                    $('#confirm_loader').hide();
                    $('#confirm_modal').modal('hide');
                });
            }
        })
    });


</script>

@endsection