@extends('layouts.app')
@section('title', __('locations::lang.cities'))

@section('content')
    <section class="content-header">
        <h1>@lang('locations::lang.cities')</h1>
    </section>

    @include('locations::layouts.nav')

    <section class="content">
        <div class="box box-solid">
            <div class="box-header with-border">
                <button type="button" class="btn btn-primary btn-modal" data-href="{{ route('cities.create') }}" data-container="#action_modal">
                    <i class="fa fa-plus"></i> @lang('messages.add')
                </button>
            </div>
            <div class="box-body">
                <table class="table table-bordered table-striped" id="trip_cities_table">
                    <thead>
                        <tr>
                            <th>@lang('locations::lang.states')</th>
                            <th>@lang('lang.name')</th>
                            <th>@lang('messages.action')</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </section>

    <div class="modal fade" id="action_modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel"></div>
@endsection

@section('javascript')
    <script>
        $(document).ready(function () {
            $('#trip_cities_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route("cities.index") }}',
                columns: [
                    { data: 'state', name: 'state'},
                    { data: 'name', name: 'name'},
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });

            // فتح مودال الإضافة أو التعديل
            $(document).on('click', '.btn-modal', function (e) {
                e.preventDefault();
                var href = $(this).data('href');
                var container = $(this).data('container');
                $.ajax({
                    url: href,
                    dataType: 'html',
                    success: function(result) {
                        $(container).html(result).modal('show');
                    },
                    error: function(xhr) {
                        toastr.error('@lang("messages.something_went_wrong")');
                    }
                });
            });
        });

        // حذف العنصر
        $(document).on('click', '.delete', function(e) {
            e.preventDefault();
            var href = $(this).data('href');

            swal({
                title: LANG.sure,
                text: LANG.confirm_delete,
                icon: "warning",
                buttons: true,
                dangerMode: true,
            }).then((willDelete) => {
                if (willDelete) {
                    $.ajax({
                        method: 'DELETE',
                        url: href,
                        data: { _token: '{{ csrf_token() }}' },
                        success: function(result) {
                            if (result.success) {
                                toastr.success(result.msg);
                                $('#trip_cities_table').DataTable().ajax.reload();
                            } else {
                                toastr.error(result.msg);
                            }
                        },
                        error: function() {
                            toastr.error('@lang("messages.something_went_wrong")');
                        }
                    });
                }
            });
        });
    </script>
@endsection