@extends('admin::layouts.plane')
@section('page_heading') {{ $title }} @endsection
@section('content')

    <style>
        .hod-row{
            font-weight: 500;
        }
    </style>
    {{-- <h4 class="page-header" style= "text-align: center;">Teacher User Map</h4> --}}
    <div class="col-lg-12">
        <div class="row">
            <div class="col-lg-6" style ="padding-left: 32px;">
                <h4 >Teacher User Map</h4>
            </div>
            <div class="col-lg-6">
                {{ Form::open(['method' => 'GET']) }}
                {{ csrf_field() }}
                <div class="form-group row" >
                    <div class="col-lg-3"></div>
                    <div class="col-lg-6">
                        {{ Form::select('department', $departments, $department, ['placeholder' => '- Select Department -', 'class' => 'form-control', 'id' => 'department']) }}
                    </div>
                    <div class="col-lg-3">
                        {{ Form::submit('Submit', ['class' => 'btn btn-warning']) }}
                    </div>
                </div>
                {{ Form::close() }}
            </div>
        </div>
    </div>
    <table class="table table-striped" style ="margin: 0 32px;">
        <thead>
            <tr>
                <th>Department</th>
                <th>Name| Emp ID| Designation</th>
                <th>User Name</th>
                <th>Password</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <form id="user_map_form" method="POST">
                @foreach ($teacher_user_map as $teacher)
                    <tr class="{{$teacher['is_hod']?'hod-row':''}}">
                        <td width="10%">{{ $departments[$teacher['dept_id']] ?? '' }}</td>
                        <td width="30%">{{$teacher["is_hod"]?"HOD-":""}} {{ $teacher['title'] }} </td>
                        <td width="20%">

                            <input type="text" class="form-control user_name" name="user_name_{{ $teacher['id'] }}"
                                value="{{ $teacher['user_name'] }}" readonly>
                        </td>
                        <td width="20%">
                            <input type="password" class="form-control password" name="password_{{ $teacher['id'] }}"
                                placeholder="password" value="123456">
                        </td>
                        <td width="20%">
                            @php
                                $showUpdate = $teacher['user_id'] ? true : false;
                            @endphp
                            <button type="button" class="btn btn-primary save-btn" id="save-btn-{{ $teacher['id'] }}"
                                data-id="{{ $teacher['id'] }}" style="{{ $showUpdate ? '' : 'display:none' }}"
                                data-user_id ="{{ $teacher['user_id'] }}">Update</button>
                            <button type="button" class="btn btn-success create-btn" id="create-btn-{{ $teacher['id'] }}"
                                data-id="{{ $teacher['id'] }}" style="{{ !$showUpdate ? '' : 'display:none' }}">Create
                                User</button>

                        </td>
                    </tr>
                @endforeach
            </form>
        </tbody>
    </table>



    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.save-btn').on('click', function(e) {

                var user_id = $(this).data('user_id');
                var id = $(this).data('id');
                var password = $('input[name="password_' + id + '"]').val();
                var userName = $('input[name="user_name_' + id + '"]').val();
                $.ajax({
                    url: "{{ route('au.users.update') }}",
                    method: 'POST',
                    data: {
                        user_id: user_id,
                        password: password,
                        user_name: userName,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        alert(response.message);
                        $("#create-btn-" + id).hide();
                        $("#save-btn-" + id).show();
                    },
                    error: function(xhr) {
                        alert('Error: ' + xhr.responseText);
                    }
                });
            });

            $('.create-btn').on('click', function() {
                var id = $(this).data('id');
                var userName = $('input[name="user_name_' + id + '"]').val();
                var password = $('input[name="password_' + id + '"]').val();

                $.ajax({
                    url: "{{ route('au.users.create') }}",
                    method: 'POST',
                    data: {
                        emp_id: id,
                        user_name: userName,
                        password: password,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        alert(response.message);
                        $("#create-btn-" + id).hide();
                        $("#save-btn-" + id).show();
                        $("#save-btn-" + id).data('user_id', response.user_id);
                        $('input[name="password_' + id + '"]').val('');
                    },
                    error: function(xhr) {
                        alert('Error: ' + xhr.responseText);
                    }
                });
            });
        });
    </script>
@stop