@extends('app')
@section('content')
<link href="{{ asset('assets/plugins/jquery-notifications/css/messenger.css')}}" rel="stylesheet" type="text/css" media="screen"/>
<link href="{{ asset('assets/plugins/jquery-notifications/css/messenger-theme-flat.css')}}" rel="stylesheet" type="text/css" media="screen"/>
@if(Session::has('flash_message'))
<div class="alert {{ (Session::has('flash_message_status'))?'alert-error':'alert-success'}}" style="text-align: center;">
    <button class="close" data-dismiss="alert"></button>
    {!! Session::get('flash_message') !!}
</div>
@endif

<style>
    .brownbtn{
         background: #CF806B !important;
        }
</style>


<div class="grid simple vertical mobile-scroll">

    <div class="grid-body no-border"></br>
        <div class="row">
            <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
                <!-- <div class='control' style="margin-bottom: 10px;  width: 100%;  background-color: #fff;">
                    @if(Auth::user()->hasPermission('cities-create'))
                        <a href="javascript:void(0)" data-target="#imageModal" data-toggle='modal' class="btn btn-primary" style="margin-right: -2px">أضف مدينة</a>
                    @endif
                    <div class="pull-right markaction">
                        @if(Auth::user()->hasPermission('cities-destroy'))
                            <a id="del" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/cities/bulkdelete') }}">حذف</a>
                        @endif
                    </div>
                    <div class="col-sm-6 col-xs-12 col-md-offset-2" style="text-align: center;">
                            <span class="bold" style="font-size: 20px;">إدارة معلومات المدينة</span>
                        </div>
                </div> -->

                <div class='row control' style="margin-bottom: 10px; margin-top: 10px;  background-color: #fff;">
                    <div class="col-sm-4 col-xs-12">
                        <div class="pull-right markaction">
                            @if(Auth::user()->hasPermission('cities-destroy'))
                                <a id="del" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/cities/bulkdelete') }}">حذف</a>
                            @endif
                        </div>
                    </div>

                       <div class="col-sm-4 col-xs-12" >
                            <div class="c-page-title">
                                       <span> المدينة </span>
                            </div>


                       </div>

                       <div class="col-sm-4 col-xs-12">
                        @if(Auth::user()->hasPermission('cities-create'))
                            <a href="javascript:void(0)" data-target="#imageModal" data-toggle='modal' class="btn btn-primary"  style="background: #CF806B !important; margin-right: -2px;">أضف مدينة</a>
                        @endif

                        @if(!Auth::user()->hasPermission('cities-create') && Auth::user()->hasPermission('cities-destroy'))
                             <a href="#" class="btn btn-primary" style="visibility: hidden;">no visibilty</a>
                        @endif
                       </div>
                </div>

                <table class="table table-hover table-bordered" id="datatable-example" >
                    <thead>
                        <tr style="color: white;">
                        @if(Auth::user()->hasPermission("cities-destroy"))
                            <th><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" /></th>
                        @else
                        <th><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" disabled/></th>
                        @endif
                            <th>Id</th>
                            <th>البلد</th>
                            <th>المدينة</th>
                            <th></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<!--Add City Modal-->
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            {!! Form::open(['class'=>'labels-align-verticle','method' => 'POST','route' => 'cities.store','id'=>'form_albumimage']) !!}
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">إضافة مدينة</h4>
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <div class="right col-md-5 col-md-offset-3  col-sm-12">
                        {!! Form::select('country_id',[''=>'']+$countries->toArray(),null, ['class' => 'select_country','id'=>'country_select2','required'=>true,'dir'=>"rtl",'style'=>'width:100%']) !!}
                    </div>
                    <div class="col-md-2  col-sm-12 text-left">
                        {!! Form::label('country', 'البلد', ['class' => 'form-label']) !!}
                    </div>
                </div>
                <div class="form-group row">
                    <div class="right col-md-5 col-md-offset-3  col-sm-12">
                        {!! Form::text('name', null, ['class' => 'form-control','required'=>true,'maxlength'=>'20']) !!}
                    </div>
                    <div class="col-md-2  col-sm-12 text-left">
                        {!! Form::label('name', 'المدينة', ['class' => 'form-label']) !!}
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick='closeModal("#imageModal")' aria-label="Close"><span aria-hidden="true">إلغاء</span></button>
                <button type="submit" class="btn btn-primary brownbtn">حفظ</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
<!--Modal Close-->

<!-- Edit City Modal -->
<div class="modal fade" id="RowEditModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content" style="margin-top: 70px ">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">تحرير مدينة</h4>
            </div>
            {!! Form::open(['class'=>'labels-align-verticle','id'=>'form_row_deit','method' => 'POST', 'route' => 'admin.cities.editcity']) !!}
            <div class="modal-body">
                <input type="hidden" id="id_field" name="request_id" class="form-control" placeholder="Enter Message">
                <div class="form-group row">
                    <div class="right col-md-5 col-md-offset-3  col-sm-12">
                        {!! Form::select('country_id',[''=>'']+$countries->toArray(),null,['class'=>'form-control select_country','required','style'=>'width:100%','id'=>'country_select']) !!}
                    </div>
                    <div class="col-md-2  col-sm-12 text-left">
                        {!! Form::label('country', 'البلد', ['class' => 'form-label']) !!}
                    </div>
                </div>
                <div class="form-group row">
                    <div class="right col-md-5 col-md-offset-3  col-sm-12">
                        {!! Form::text('name', null, ['class' => 'form-control','required','id'=>'name_field','maxlength'=>'20']) !!}
                    </div>
                    <div class="col-md-2  col-sm-12 text-left">
                        {!! Form::label('name', 'المدينة', ['class' => 'form-label text-right']) !!}
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn  btn-default" data-dismiss="modal">إلغاء</button>
                 {!! Form::submit('تحديث',['class'=>'btn btn-primary btn-cons', 'id'=>'submit_row_edit_form','style'=>'font: 18px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:bold;'])!!}
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
<!-- Modal Close -->


{!! Form::open(['method' => 'POST','class' => 'inline','id'=> 'bulkaction']) !!}
<input type="hidden" value="" name="ids" id="ids" />
{!! Form::close() !!}
@endsection

@section('page_script')
<script type="text/javascript" language="javascript" class="init">

            $("select").select2({

            placeholder:"اضغط"

            });

    function closeModal(id) {
        $(id).modal('hide');
    }

    $(document).on("click","#request",function(e){
        var request = $(this).data('request');

        var name = request.name;
        var country_id = request.country_id;
        var request_id = request.id;

        $("#name_field").val(name);
        $('#country_select').select2({dir: "rtl",placeholder: "اضغط"}).val(country_id).trigger('change');
        //$("#country_id").val(country_id);
        $('#id_field').val(request_id);
    });

    // $("#submit_row_edit_form").on("click",function(){

    //     var name = $("#name_field").val();
    //     var country_id = $("#country_select").val();
    //     var request_id = $("#id_field").val();
    //     $.ajax({beforeSend: function(){
    //                 $('#progressbar').show();
    //             },
    //                 method: "GET",
    //                 url: "{{ URL::to('admin/cities/editcity') }}",
    //                 data: {
    //                     name:name,
    //                     country_id:country_id,
    //                     request_id:request_id,
    //                 },

    //                 error: function(jqXHR, textStatus, errorThrown){
    //                     $('.custom-error-msg').show();


    //                     console.log(jqXHR);
    //                     console.log(textStatus);
    //                     console.log(errorThrown);
    //                     $('#progressbar').hide();
    //                 }
    //             })
    //             .done(function( result ) {
    //                 location.reload();
    //                 $( window ).load(function() {
    //                     $('#progressbar').hide();
    //                 });
    //             });
    // });

    jQuery(document).ready(function ($) {

        $('#datatable-example').DataTable({
            processing: true,

            serverSide: true,
            "order": [[1, "desc"]],
            language: { search: "",
                         searchPlaceholder: "بحث",
                         "zeroRecords": "لا يوجد محتوى",
                         processing: "<img src='{{url('/')}}/assets/img/Webp.net-resizeimage.gif' />" },
            ajax: {
                "url": "{{ URL::to('admin/cities/datatable') }}",
                "type": "POST"
            },
            columns: [
                {data: 'check', name: 'check'},
                {data: 'id', name: 'id'},
                {data: 'country_name', name: 'countries.name'},
                {data: 'name', name: 'cities.name'},
                {data: 'actions', name: 'actions'}
            ],
            "iDisplayLength": 50,
            "columnDefs": [
                {
                    "targets": [1],
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": [0, 4],
                    "searchable": false
                },
                {
                    "targets": [0, 1, 2, 3, 4],
                    "orderable": false
                },
                {
                    "targets": [2,3],
                    "className": 'dt-body-right'
                },
            ]
        });

        $('#datatable-example_wrapper .dataTables_filter input').addClass("input-medium "); // modify table search input
        $('#datatable-example_wrapper .dataTables_length select').addClass("select2-wrapper span12"); // modify table per page dropdown
        $('#datatable-example_wrapper .dataTables_length select').removeClass("form-control");



        $('#datatable-example input').click(function () {
            $(this).parent().parent().parent().toggleClass('row_selected');
        });


        $(".select2-wrapper").select2({minimumResultsForSearch: -1});

    });


</script>
<script src="{{ asset('assets/plugins/jquery-notifications/js/messenger.min.js')}}" type="text/javascript"></script>
<script src="{{ asset('assets/plugins/jquery-notifications/js/messenger-theme-future.js')}}" type="text/javascript"></script>
@endsection