@extends("admin.layouts.master")

@section("title","Manage City")

@section("content")
<div class="row">
    {{-- ====================== --}}
    {{--      CITY MODAL       --}}
    {{-- ====================== --}}
    <div class="modal fade" id="cityModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <form id="cityForm" method="POST">
                @csrf
                <input type="hidden" name="_method" id="formMethod" value="POST">

                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalTitle">Add City</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <div class="modal-body">
                        <div class="row">

                            <div class="col-md-6 form-group">
                                <label>Select Division</label>
                                <select name="division_id" id="modalDivisionId" class="form-control">
                                    <option value="" disabled selected>Select Division</option>
                                    @foreach ($divisions as $division)
                                        <option value="{{ $division->id }}">{{ $division->name }}</option>
                                    @endforeach
                                </select>
                                <span class="text-danger" id="divisionError"></span>
                            </div>

                            <div class="col-md-6 form-group">
                                <label>Name</label>
                                <input type="text" name="name" id="modalName" class="form-control" placeholder="Ex. Dhaka">
                                <span class="text-danger" id="nameError"></span>
                            </div>

                            <div class="col-md-6 form-group">
                                <label>English Name</label>
                                <input type="text" name="en_name" id="modalEnName" class="form-control" placeholder="Ex. Dhaka">
                            </div>

                            <div class="col-md-6 form-group">
                                <label>Code</label>
                                <input type="text" name="code" id="modalCode" class="form-control" placeholder="Ex. 001">
                            </div>

                            <div class="col-md-6 form-group">
                                <label>Population</label>
                                <input type="text" name="population" id="modalPopulation" class="form-control" placeholder="Ex. 500000">
                            </div>

                            <div class="col-md-6 form-group">
                                <label>History</label>
                                <input type="text" name="history" id="modalHistory" class="form-control" placeholder="Ex. Established in 1800s">
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-success" type="submit">Save</button>
                        <button class="btn btn-danger" type="button" data-dismiss="modal">Close</button>
                    </div>
                </div>

            </form>
        </div>
    </div>

    {{-- ====================== --}}
    {{--      TABLE & BUTTON    --}}
    {{-- ====================== --}}
    <div class="col-lg-12">
        <div class="card mt-3">
            <div class="card-header  justify-content-between align-items-center">
                <h3 class="mb-0 float-left">All Cities</h3>
                <button class="btn btn-primary  float-right" data-toggle="modal" data-target="#cityModal" onclick="openCreateModal()">
                    <i class="fa fa-plus"></i> Add City
                </button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>SL</th>
                                <th>Division</th>
                                <th>Name</th>
                                <th>EN Name</th>
                                <th>Code</th>
                                <th>Population</th>
                                <th>History</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($cities as $info)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $info->division->name ?? '' }}</td>
                                    <td>{{ $info->name }}</td>
                                    <td>{{ $info->en_name ?? '---' }}</td>
                                    <td>{{ $info->code }}</td>
                                    <td>{{ $info->population }}</td>
                                    <td>{{ $info->history }}</td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="actionMenu{{ $info->id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Actions
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="actionMenu{{ $info->id }}">
                                                <button
                                                    class="dropdown-item edit-btn"
                                                    data-id="{{ $info->id }}"
                                                    data-division_id="{{ $info->division_id }}"
                                                    data-name="{{ $info->name }}"
                                                    data-en_name="{{ $info->en_name }}"
                                                    data-code="{{ $info->code }}"
                                                    data-population="{{ $info->population }}"
                                                    data-history="{{ $info->history }}"
                                                    data-toggle="modal"
                                                    data-target="#cityModal">
                                                    <i class="fa fa-edit"></i> Edit
                                                </button>
                                                <div class="dropdown-divider"></div>
                                                @include("admin.partial.delete-form",[
                                                    "route"=>route('city.destroy', ['city' => $info->id]),
                                                    "btn_class"=>"dropdown-item text-danger"
                                                ])
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center text-danger">No Cities Found</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section("js")
@include("admin.partial.datatable-script")

<script>
function openCreateModal(){
    $("#modalTitle").text("Add City");
    $("#cityForm").attr("action","{{ route('city.store') }}");
    $("#formMethod").val("POST");

    $("#modalDivisionId").val('');
    $("#modalName").val('');
    $("#modalEnName").val('');
    $("#modalCode").val('');
    $("#modalPopulation").val('');
    $("#modalHistory").val('');
};

// Edit Modal using data attributes
// Edit Modal using data attributes
$(document).on('click', '.edit-btn', function(){
    var id = $(this).data('id');
    $("#modalTitle").text("Edit City");
    $("#cityForm").attr("action","/city/" + id);
    $("#formMethod").val("PUT");

    // Division select value set
    var divisionId = $(this).data('division_id');
    $("#modalDivisionId").val(divisionId).trigger('change'); // trigger in case any event bound

    // Input fields
    $("#modalName").val($(this).data('name'));
    $("#modalEnName").val($(this).data('en_name'));
    $("#modalCode").val($(this).data('code'));
    $("#modalPopulation").val($(this).data('population'));
    $("#modalHistory").val($(this).data('history'));

    $("#cityModal").modal('show');
});

</script>
@endsection