@extends('layouts.tenant.master')
@section('title', 'Role Menu')

@section('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
@endsection

@section('style')
@endsection

@section('breadcrumb-title')
    <h2>Roles <span>Edit </span></h2>
@endsection

@section('breadcrumb-items')
    <li class="breadcrumb-item">Roles</li>
    <li class="breadcrumb-item active">Edit</li>
@endsection
@section('content')
    <div class="container">
        <h4 class="mb-2">Edit Assignment for {{ $assignedUser->username }} ({{ ucfirst($type) }})</h4>

        <form action="{{ route('tenant_role_assignment_update') }}" method="POST">
            @csrf
            <input type="hidden" name="assigned_user_id" value="{{ $assignedUser->id }}">
            <input type="hidden" name="type" value="{{ $type }}">

            <div class="form-group">
                <label for="new_rep">Select New Representative:</label>
                <select name="new_rep_id" class="form-control" required>
                    @foreach ($representatives as $rep)
                        <option value="{{ $rep->id }}" {{ $rep->username == $repUsername ? 'selected' : '' }}>
                            {{ $rep->username }}
                            {{-- {{ $rep->username }} ({{ $rep->email }}) --}}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="form-group mt-3 text-center">
                <button type="submit" class="btn btn-outline-primary">Update Assignment</button>
                <a href="{{ route('tenant_role_index') }}" class="btn btn-outline-secondary">Cancel</a>
            </div>
        </form>
    </div>
@endsection

@section('script')

    @if (session('duplicate_assignment'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    icon: 'warning',
                    title: 'Duplicate Assignment',
                    text: '{{ session('duplicate_assignment') }}',
                });
            });
        </script>
    @endif
    <script>
        new DataTable('#rolesListTable', {
            initComplete: function() {
                this.api()
                    .columns()
                    .every(function(index) {
                        let column = this;
                        let input = $('thead tr:eq(1) th').eq(index).find('input');
                        if (input.length) {
                            input.on('keyup change', function() {
                                if (column.search() !== this.value) {
                                    column.search(this.value).draw();
                                }
                            });
                        }
                    });
            }
        });
    </script>

@endsection