@extends('layouts.master')

@section('title', 'Users')

@section('content')

    <div class="card">

        <div class="card-header">

            <div class="d-flex justify-content-between align-items-center">

                <h4 class="card-title mb-0">
                    User List
                </h4>

                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addUserModal">

                    <i class="bi bi-person-plus"></i>
                    Add User

                </button>

            </div>

        </div>

        <div class="card-body">

            <div class="table-responsive">

                <table class="table table-striped" id="usersTable">

                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Username</th>
                            <th>Phone</th>
                            <th>Role</th>
                            <th>Border Station</th>
                            <th>Status</th>
                            <th>Created By</th>
                            <th width="120">Action</th>
                        </tr>
                    </thead>

                    <tbody>

                        @foreach ($users as $user)
                            <tr>

                                <td>{{ $user->name }}</td>

                                <td>{{ $user->username }}</td>

                                <td>
                                    {{ $user->phone ?? 'NO PHONE' }}
                                </td>

                                <td>
                                    {{ $user->roles->first()?->name }}
                                </td>

                                <td>
                                    {{ optional($user->borderStation)->name }}
                                </td>

                                <td>
                                    @if ($user->status)
                                        <span class="badge bg-success">
                                            ACTIVE
                                        </span>
                                    @else
                                        <span class="badge bg-danger">
                                            DISABLED
                                        </span>
                                    @endif
                                </td>

                                <td>
                                    {{ optional($user->creator)->name }}
                                </td>

                                <td>

                                    <button class="btn btn-sm btn-primary edit-user" data-id="{{ $user->id }}"
                                        data-name="{{ $user->name }}" data-username="{{ $user->username }}"
                                        data-phone="{{ $user->phone }}" data-role="{{ $user->roles->first()?->name }}"
                                        data-status="{{ $user->status }}"
                                        data-border_station_id="{{ $user->border_station_id }}">

                                        <i class="bi bi-pencil"></i>

                                    </button>

                                </td>

                            </tr>
                        @endforeach

                    </tbody>

                </table>

            </div>

        </div>

    </div>

    @include('users.partials.add-user-modal')
    @include('users.partials.edit-user-modal')

@endsection

@push('scripts')
    <script>
        $(document).ready(function() {

            $('#usersTable').DataTable({
                pageLength: 25
            });

        });



        $(document).on('click', '.edit-user', function() {

            let id = $(this).data('id');

            $('#edit_name').val($(this).data('name'));
            $('#edit_username').val($(this).data('username'));
            $('#edit_phone').val($(this).data('phone'));

            $('#edit_role').val($(this).data('role'));
            $('#edit_status').val($(this).data('status'));

            $('#edit_border_station_id')
                .val($(this).data('border_station_id'));

            if ($(this).data('role') === 'Border Staff') {

                $('#edit-border-wrapper').show();

                $('#edit_border_station_id')
                    .prop('required', true);

            } else {

                $('#edit-border-wrapper').hide();

                $('#edit_border_station_id')
                    .prop('required', false);

            }

            $('#editUserForm').attr(
                'action',
                "{{ url('users') }}/" + id
            );

            const modal = new bootstrap.Modal(
                document.getElementById('editUserModal')
            );

            modal.show();

        });


        // Role change while modal is open
        $('#edit_role').on('change', function() {

            if ($(this).val() === 'Border Staff') {

                $('#edit-border-wrapper').show();

                $('#edit_border_station_id')
                    .prop('required', true);

            } else {

                $('#edit-border-wrapper').hide();

                $('#edit_border_station_id')
                    .prop('required', false)
                    .val('');

            }

        });
    </script>
@endpush
