@extends('layouts.admin')
@section('styles')
    <link rel="stylesheet" href="{{asset('plugins/datatables/dataTables.bootstrap4.css')}}">
@endsection
@section('content')
    <!-- Main row -->
    <div class="row">
        <!-- Left col -->
        <section class="col-lg-9">
            <!-- Map card -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">All City Lists</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    @if (session()->has('message'))
                        <div class="alert alert-{{ session()->get('type')}} alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                            <h5><i class="icon fa fa-check"></i> {{ session()->get('title')}}..!</h5>
                            {{ session()->get('message')}}
                        </div>
                    @endif
                    <table id="example1" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th style="width: 10px">No</th>
                            <th>City</th>
                            <th>State</th>
                            <th>Country</th>
                            <th class="text-center">Total Posts</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @php $id=0;@endphp
                        @foreach($cities as $city)
                            @php $id++;@endphp
                            <tr>
                                <td class="text-center">{{$id}}</td>
                                <td>{{$city->name}}</td>
                                <td>{{$city->state->name}}</td>
                                <td>{{$city->state->country->name}}</td>
                                <td class="text-center"><span class="badge bg-success"><strong>{{count($city->posts)}}</strong></span></td>
                                @if($city->status == true)
                                    <td class="text-center">Published</td>
                                @else
                                    <td class="text-center">Not Published</td>
                                @endif
                                <td class="text-center">
                                    @if($city->status == true)
                                        <a href="{{route('adminCityStatus',$city->id)}}" class="btn btn-sm btn-warning"><i class="fa fa-edit"></i></a>
                                    @else
                                        <a href="{{route('adminCityStatus',$city->id)}}" class="btn btn-sm btn-success"><i class="fa fa-edit"></i></a>
                                    @endif

                                        <button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#delPost{{$state->id}}"><i class="fa fa-trash"></i></button>
                                        <div class="modal fade" id="delPost{{$city->id}}" tabindex="-1" role="dialog" aria-labelledby="delPost{{$state->id}}" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title text-info" id="delPost{{$state->id}}"><strong>Are you sure?</strong></h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <h6 class="text-primary"><strong>Once deleted, you will not be able to recover this state ads post including every related data.</strong></h6>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <a href="{{route('adminCityDestroy', $city->id)}}" class="btn btn-danger btn-block">I know, I'm not a Mad. Delete Now</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                        <tfoot>
                        <tr>
                            <th style="width: 10px">No</th>
                            <th>State</th>
                            <th>Country</th>
                            <th class="text-center">Total Posts</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Action</th>
                        </tr>
                        </tfoot>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </section>

        <!-- /.Left col -->
        <!-- right col (We are only adding the ID to make the widgets sortable)-->
        <section class="col-lg-3">
            <!-- Calendar -->
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Add City</h3>
                </div>
                <!-- /.card-header -->
                <!-- form start -->
                <form role="form" method="post" action="{{route('adminCity.store')}}">
                    @csrf
                    <div class="card-body">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li><i class="icon fa fa-check"></i> <strong>{{ $error }}</strong></li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <div class="form-group">
                            <label for="name">City Name</label>
                            <input type="text" class="form-control" id="name" name="name" placeholder="Enter City Name" required>
                        </div>
                            <div class="form-group">
                                <label for="state">Select State</label>
                                <select id="state" name="state" class="form-control">
                                    <option value="" selected>States List</option>
                                    @foreach($states as $state)
                                    <option value="{{$state->id}}">{{$state->name}}</option>
                                   @endforeach
                                </select>
                            </div>
                        <div class="form-group">
                            <label for="status">Select Status</label>
                            <select id="status" name="status" class="form-control">
                                <option value="1" selected>Published</option>
                                <option value="0">Un-Published</option>
                            </select>
                        </div>
                    </div>
                    <!-- /.card-body -->

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
            <!-- /.card -->
        </section>
        <!-- right col -->
    </div>
    <!-- /.row (main row) -->
@endsection
@section('scripts')
    <script src="{{asset('plugins/datatables/jquery.dataTables.js')}}"></script>
    <script src="{{asset('plugins/datatables/dataTables.bootstrap4.js')}}"></script>
    <script>
        $(function () {
            $("#example1").DataTable();
        });
    </script>
@endsection