@extends('layouts.admin')

@section('title', 'Police Station')

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

                    <div class="form-group form-float">
                        <label>Police Station Name</label>
                        <input type="text" class="form-control" placeholder="Police Station Name" id="name" name="name">
                        <div id="name_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() {
        $('#station_form')[0].reset();
        $('#name_error').html('');
        $('#station_modal_title').text("Add Police Station");
        $('#action_button').html("Save");
        $('#action').val("Add");
        $('#station_modal').modal('show');
    });

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

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

    var thana_id = {{ $thana_id }};

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

    $('#station_form').on('submit', function(event){
        event.preventDefault();
        if($('#action').val() == 'Add')
        {
            $.ajax({
                url: "{{ route('station.store') }}",
                type:'post',
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                dataType: 'json',
                beforeSend: function(){
                    $('#station_modal_loader').show();
                },
                success:function(data)
                {
                    $('#station_modal_loader').hide();
                    if(data.errors)
                    {
                        $('#name_error').html('<span style="color:red">'+data.errors.name+'</span>');
                    }
                    if(data.success)
                    {
                        $('#station_form')[0].reset();
                        $('#station_table').DataTable().ajax.reload();
                        $('#station_modal').modal('hide');
                    }

                }
            });
        }

        if($('#action').val() == 'Edit')
        {
            $.ajax({
                url: "{{ route('station.update') }}",
                type:'post',
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                dataType: 'json',
                beforeSend: function(){
                    $('#station_modal_loader').show();
                },
                success:function(data)
                {
                    $('#station_modal_loader').hide();
                    if(data.errors)
                    {
                        $('#name_error').html('<span style="color:red">'+data.errors.name+'</span>');
                    }
                    if(data.success)
                    {
                        $('#station_form')[0].reset();
                        $('#station_table').DataTable().ajax.reload();
                        $('#station_modal').modal('hide');
                    }

                }
            });
        }

    });

    $(document).on('click', '.edit', function(){
        var id = $(this).attr('id');
        $('#name_error').html('');
        $('#station_modal').modal('show');
        $.ajax({
            url: SITEURL+"/station/"+id+"/edit",
            dataType:"json",
            beforeSend: function(){
                $('#station_modal_loader').show();
            },
            success:function(data){
                $('#name').val(data.station.name);
                $('#hidden_id').val(data.station.id);
                $('#station_modal_title').text("Edit Police Station");
                $('#action_button').html("Save");
                $('#action').val("Edit");
                $('#station_modal_loader').hide();
            }
        })
    });

    var station_id;

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

    $('#ok_button').click(function(){
        $.ajax({
            url: SITEURL+"/station/"+station_id,
            method: "DELETE",
            beforeSend:function(){
                $('#confirm_loader').show();
            },
            success:function(data)
            {
                if(data.error){
                    swal({
                        title: "Error",
                        text: data.error,
                        icon: "warning",
                        button: "Ok!",
                    }).then((value) => {
                        $('#station_table').DataTable().ajax.reload();
                        $('#confirm_loader').hide();
                        $('#confirm_modal').modal('hide');
                    });
                }
                if(data.success){

                    swal({
                        title: "Success",
                        text: data.success,
                        icon: "success",
                        button: "Ok!",
                    }).then((value) => {
                        $('#station_table').DataTable().ajax.reload();
                        $('#confirm_loader').hide();
                        $('#confirm_modal').modal('hide');
                    });
                }
            }
        })
    });


</script>

@endsection