@extends('layouts.admin')

@section('title', 'Thana')

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

                    <div class="form-group form-float">
                        <label>Thana Name</label>
                        <input type="text" class="form-control" placeholder="Thana 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() {
        $('#thana_form')[0].reset();
        $('#name_error').html('');
        $('#thana_modal_title').text("Add Thana");
        $('#action_button').html("Save");
        $('#action').val("Add");
        $('#thana_modal').modal('show');
    });

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

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

    var circle_id = {{ $circle_id }};

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

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

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

                }
            });
        }

    });


    $(document).on('click', '.edit', function(){
        var id = $(this).attr('id');
        $('#name_error').html('');
        $('#thana_modal').modal('show');
        $.ajax({
            url: SITEURL+"/circle/thana/"+id+"/edit",
            dataType:"json",
            beforeSend: function(){
                $('#thana_loader').show();
            },
            success:function(data){
                $('#name').val(data.thana.name);
                $('#hidden_id').val(data.thana.id);
                $('#union_modal_title').text("Edit Union");
                $('#action_button').html("Save");
                $('#action').val("Edit");
                $('#thana_loader').hide();
            }
        })
    });


    var thana_id;

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

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


</script>

@endsection