@extends('layouts.app')
@section('title', 'Cities')

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>Cities
        <small>Manage your cities</small>
    </h1>
    <!-- <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
    </ol> -->
</section>

<!-- Main content -->
<section class="content">
    @component('components.widget', ['class' => 'box-primary', 'title' => 'All your cities'])
        @can('cities.create')
            @slot('tool')
                <div class="box-tools">
                    <button type="button" class="btn btn-block btn-primary btn-modal" 
                        data-href="{{action('ContactCitiesController@create')}}" 
                        data-container=".cities_modal">
                        <i class="fa fa-plus"></i> @lang( 'messages.add' )</button>
                </div>
            @endslot
        @endcan
        @can('brand.view')
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="cities_table">
                    <thead>
                        <tr>
                            <th>Cities</th>
                            <th>Sub Cities</th>
                            <th>@lang( 'messages.action' )</th>
                        </tr>
                    </thead>
                </table>
            </div>
        @endcan
    @endcomponent

    <div class="modal fade cities_modal" tabindex="-1" role="dialog" 
    	aria-labelledby="gridSystemModalLabel">
    </div>

</section>
<!-- /.content -->

@stop

@section('javascript')
<script type="text/javascript">
$(document).ready( function(){
    var cities_table = $('#cities_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '/cities',
        columns: [
            { data: 'city_name', name: 'city_name'},
            { data: 'sub_cites', name: 'sub_cites', "searchable": false},
            { data: 'action', name: 'action', orderable: false, "searchable": false},
        ],
    });

    $(document).on('click', '#add_sub_cities', function () {
        var html =
            '<div class="form-group"><div class="col-sm-7 col-sm-offset-3"><input type="text" name="sub_cities[]" class="form-control" required></div><div class="col-sm-2"><button type="button" class="btn btn-danger delete_sub_city">-</button></div></div>';
        $('#sub_cities').append(html);
    });

    $(document).on('click', '.delete_sub_city', function () {
        $(this)
            .closest('.form-group')
            .remove();
    });

    $(document).on('submit', 'form#city_add_form', function (e) {
        e.preventDefault();
        var form = $(this);
        var data = form.serialize();

        $.ajax({
            method: 'POST',
            url: $(this).attr('action'),
            dataType: 'json',
            data: data,
            beforeSend: function (xhr) {
                __disable_submit_button(form.find('button[type="submit"]'));
            },
            success: function (result) {
                if (result.success === true) {
                    $('div.cities_modal').modal('hide');
                    toastr.success(result.msg);
                    cities_table.ajax.reload();
                } else {
                    toastr.error(result.msg);
                }
            },
        });
    });

    $(document).on('click', 'button.edit_cities_button', function () {
        $('div.cities_modal').load($(this).data('href'), function () {
            $(this).modal('show');

            $('form#city_edit_form').submit(function (e) {
                var form = $(this);
                e.preventDefault();
                var data = form.serialize();

                $.ajax({
                    method: 'POST',
                    url: $(this).attr('action'),
                    dataType: 'json',
                    data: data,
                    beforeSend: function (xhr) {
                        __disable_submit_button(form.find('button[type="submit"]'));
                    },
                    success: function (result) {
                        if (result.success === true) {
                            $('div.cities_modal').modal('hide');
                            toastr.success(result.msg);
                            cities_table.ajax.reload();
                        } else {
                            toastr.error(result.msg);
                        }
                    },
                });
            });
        });
    });

    $(document).on('click', 'button.delete_cities_button', function () {
        swal({
            title: LANG.sure,
            text: '',
            icon: 'warning',
            buttons: true,
            dangerMode: true,
        }).then(willDelete => {
            if (willDelete) {
                var href = $(this).data('href');
                var data = $(this).serialize();

                $.ajax({
                    method: 'DELETE',
                    url: href,
                    dataType: 'json',
                    data: data,
                    success: function (result) {
                        if (result.success === true) {
                            toastr.success(result.msg);
                            cities_table.ajax.reload();
                        } else {
                            toastr.error(result.msg);
                        }
                    },
                });
            }
        });
    });
});
</script>
@endsection