@extends('layout.master')

@section('title', 'Kemaskini Profil Pengguna')

@section('content')

<div class="page-header">
    <h5 class="page-title">Profil Pengguna</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('laman_utama') }}">Laman Utama</a></li>
            <li class="breadcrumb-item active">Profil Pengguna</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <form action="{{ route('profil_pengguna_edit.update', $user->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    
                    <div class="card-body">      
                        <div class="row mb-3">
                            <label for="inputText" class="col-sm-2 col-form-label">Peranan</label>
                            <div class="col-sm-10">
                                <select class="form-select select-2" disabled>
                                    @foreach (\App\Models\Role::get() as $value)
                                    <option value="{{ $value->id }}" {{ $user->role_id == $value->id ? 'selected' : '' }}>
                                        {{ $value->name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="name" class="col-sm-2 col-form-label">Nama</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" value="{{ $user->name }}" required>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="ic" class="col-sm-2 col-form-label">ID Pengguna</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control @error('ic') is-invalid @enderror" name="ic" value="{{ old('ic', $user->ic) }}" @role('Pentadbir Utama') @role_else readonly style="color:#9ba5ca;" @endrole data-maska="######-##-####" required>
                                @error('ic')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="ori_password" class="col-sm-2 col-form-label">Kata Laluan</label>
                            <div class="col-sm-10 position-relative">
                                <input type="password" class="form-control" id="passwordInput" name="ori_password" value="{{ $user->ori_password }}" required style="padding-right: 45px;">
                                <span id="togglePassword" class="position-absolute top-50 translate-middle-y" style="right: 25px; cursor: pointer; z-index: 10;">
                                    <i class="fas fa-eye-slash"></i>
                                </span>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="inputEmail" class="col-sm-2 col-form-label">E-mel</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email', $user->email) }}" required>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="no_tel" class="col-sm-2 col-form-label">No. Telefon</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="no_tel" value="{{ $user->no_tel }}" data-maska="60 ##########" required>
                            </div>
                        </div>
                        <fieldset class="row mb-3">
                            <legend class="col-form-label col-sm-2 pt-0">Tempat Bertugas</legend>
                            <div class="col-sm-10">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="user_category" id="user_category1" value="1" {{ $user->user_category == 1 ? 'checked' : '' }} @role('Pentadbir Utama') @role_else disabled @endrole>
                                    <label class="form-check-label" for="user_category1"> IPJPSM </label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="user_category" id="user_category2" value="2" {{ $user->user_category == 2 ? 'checked' : '' }} @role('Pentadbir Utama') @role_else disabled @endrole>
                                    <label class="form-check-label" for="user_category2"> JPN </label>
                                </div>
                            </div>
                        </fieldset>
                        @role('Pentadbir Negeri', 'Pengguna')
                        <div class="row mb-3" id="negeri_form" style="display:none;">
                            <label class="col-sm-2 col-form-label">Negeri</label>
                            <div class="col-sm-10">
                                <select class="form-select select-2" id="negeri-dropdown" aria-label="Default select example" name="negeri_id">
                                    @foreach (\App\Models\Negeri::all() as $value)
                                    <option value="{{ $value->id }}" {{ $user->negeri_id == $value->id ? 'selected' : '' }}>
                                        {{ $value->name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3" id="daerah_form" style="display:none;">
                            <label class="col-sm-2 col-form-label">Daerah / Jajahan Hutan</label>
                            <div class="col-sm-10">
                                <select class="form-select select-2" id="daerah-dropdown" aria-label="Default select example" name="daerah_hutan_id">
                                </select>
                            </div>
                        </div>
                        @endrole
                        <div class="row mb-3">
                            <label class="col-sm-2 col-form-label">Bahagian</label>
                            <div class="col-sm-10">
                                <select class="form-select select-2" id="bahagian-dropdown" aria-label="Default select example" name="bahagian_id" required>
                                    @foreach (\App\Models\Bahagian::all() as $value)
                                    <option value="{{ $value->id }}" {{ $user->bahagian_id == $value->id ? 'selected' : '' }}>
                                        {{ $value->name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-2 col-form-label">Seksyen / Unit</label>
                            <div class="col-sm-10">
                                <select class="form-select select-2" id="unit-dropdown" aria-label="Default select example" name="unit_id" required>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-2 col-form-label">Jawatan</label>
                            <div class="col-sm-10">
                                <select class="form-select select-2" id="jawatan-dropdown" aria-label="Default select example" name="jawatan_id" required>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-sm-12 text-center">
                                <button class="btn btn-primary mx-1" type="submit">Kemaskini</button>
                                <a class="btn btn-outline-danger mx-1" onclick="showAlert();">Set Semula</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @php 
        $title = 'Set Semula Kemaskini';
        $message = 'Adakah anda pasti untuk set semula kemaskini yang telah dibuat?';
    @endphp
    <x-modal-alert :title="$title" :message="$message" />
</section>
@endsection

@section('js')
@if(session('success'))
    <script>
        Swal.fire({
            icon: 'success',
            html: '{!! session('success') !!}',
            showConfirmButton: true,
        })
    </script>
@endif
<script>
    function showAlert() {
        $('#modalAlert').modal('show');
    }

    document.getElementById('togglePassword').addEventListener('click', function() {
        var passwordInput = document.getElementById('passwordInput');
        var eyeIcon = this.querySelector('i');

        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            eyeIcon.classList.remove('fa-eye-slash');
            eyeIcon.classList.add('fa-eye');
        } else {
            passwordInput.type = 'password';
            eyeIcon.classList.remove('fa-eye');
            eyeIcon.classList.add('fa-eye-slash');
        }
    });
</script>

<!-- need refactoring/optimize this -->
<script type="text/javascript">
    
    $(document).ready(function () {

        var userNegeri = {{ $user->negeri_id ?? 'null' }};
        var userDaerah = {{ $user->daerah_hutan_id ?? 'null' }};

        console.log(userNegeri + ' ' + userDaerah);

        if(userNegeri != null && userDaerah != null){

            $.ajax({
                url: "{{ route('fetch_daerah') }}",
                type: "POST",
                data: {
                    negeri_id: userNegeri,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function (result) {
                    $.each(result.daerah, function (key, value) {
    
                        var selected = '';
                        if(value.id == userDaerah)
                            selected = ' selected';
    
                        $("#daerah-dropdown").append('<option value="' + value
                            .id + '" ' + selected + '>' + value.name + '</option>');
                    });
                }
            });

            $('#negeri-dropdown').on('change', function () {
                var negeri_id = this.value;
                $("#daerah-dropdown").html('');
                $.ajax({
                    url: "{{ route('fetch_daerah') }}",
                    type: "POST",
                    data: {
                        negeri_id: negeri_id,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function (result) {
                        $.each(result.daerah, function (key, value) {
                            $("#daerah-dropdown").append('<option value="' + value
                                .id + '">' + value.name + '</option>');
                        });
                    }
                });
            });
        }


    });
</script>

<script type="text/javascript">

    var userCategory = {{ $user->user_category == 1 ? 1 : 2 }};

    if(userCategory == 1) {
        $('#negeri_form').hide();
        $('#daerah_form').hide();
    } else {
        $('#negeri_form').show();
        $('#daerah_form').show();
    }

    $('input[type=radio]').change(function(){
        if ($(this).attr("id") == "user_category2") {
            $('#negeri_form').show();
            $('#daerah_form').show();
        } else {
            $('#negeri_form').hide();
            $('#daerah_form').hide();
        }
    });
    
    $(document).ready(function () {

        $.ajax({
            url: "{{ route('fetch_unit') }}",
            type: "POST",
            data: {
                bahagian_id: {{ $user->bahagian_id ?? 'null' }},
                _token: '{{ csrf_token() }}'
            },
            dataType: 'json',
            success: function (result) {
                $.each(result.unit, function (key, value) {

                    var selected = '';
                    if(value.id == {{ $user->unit_id ?? 'null' }})
                        selected = ' selected';

                    $("#unit-dropdown").append('<option value="' + value
                        .id + '" ' + selected + '>' + value.name + '</option>');
                });
            }
        });

        $.ajax({
            url: "{{ route('fetch_jawatan') }}",
            type: "POST",
            data: {
                unit_id: {{ $user->unit_id ?? 'null' }},
                _token: '{{ csrf_token() }}'
            },
            dataType: 'json',
            success: function (result) {
                $.each(result.jawatan, function (key, value) {

                    var selected = '';
                    if(value.id == {{ $user->jawatan_id ?? 'null' }})
                        selected = ' selected';

                    $("#jawatan-dropdown").append('<option value="' + value
                        .id + '" ' + selected + '>' + value.name + '</option>');
                });
            }
        });

        $('#bahagian-dropdown').on('change', function () {
            var bahagian_id = this.value;
            $("#unit-dropdown").html('');
            $.ajax({
                url: "{{ route('fetch_unit') }}",
                type: "POST",
                data: {
                    bahagian_id: bahagian_id,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function (result) {
                    $.each(result.unit, function (key, value) {
                        $("#unit-dropdown").append('<option value="' + value
                            .id + '">' + value.name + '</option>');
                    });
                }
            });
        });
       
        $('#unit-dropdown').on('change', function () {
            var unit_id = this.value;
            $("#jawatan-dropdown").html('');
            $.ajax({
                url: "{{ route('fetch_jawatan') }}",
                type: "POST",
                data: {
                    unit_id: unit_id,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function (result) {
                    $.each(result.jawatan, function (key, value) {
                        $("#jawatan-dropdown").append('<option value="' + value
                            .id + '">' + value.name + '</option>');
                    });
                }
            });
        });

    });
</script>
@endsection