@extends('layouts.app')

@section('title', 'Daftar Pengguna Baru')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <!-- End Logo -->
                <div class="card my-3">
                    <div class="card-body px-5">
                        <div class="card-title text-center fs-4"><strong>DAFTAR PENGGUNA BARU</strong></div>

                        <form action="javascript:void(0)" id="register-form" name="register-form" class="row g-3 needs-validation" method="POST" enctype="multipart/form-data" novalidate>
                            @csrf
                            <div class="row">
                                <label for="name" class="col-sm-4 col-form-label">Nama <span class="required-field">*</span></label>
                                <div class="col-sm-8">
                                    <input type="text" name="name" class="form-control" id="name" value="{{ old('name') }}" style="text-transform:uppercase" required>
                                    <span class="error-text" role="alert"></span>
                                </div>
                            </div>
                            <div class="row">
                                <label for="ic" class="col-sm-4 col-form-label">ID Pengguna (No Kad Pengenalan)<span class="required-field">*</span>
                                    <i class="fa-solid fa-circle-info text-info fs-lg ms-1" style="cursor:help;" data-bs-toggle="tooltip" data-bs-placement="top" title="No. Kad Pengenalan Akan Digunakan Sebagai ID Pengguna"></i>
                                </label>
                                <div class="col-sm-8">
                                    <input type="text" name="ic" class="form-control" id="ic" value="{{ old('ic') }}" data-maska="######-##-####" required>
                                    <span class="error-text" role="alert"></span>
                                </div>
                            </div>

                            <div class="col-12 col-md-6 form-group">
                                <label for="password" class="form-label">Kata Laluan <span class="required-field">*</span>
                                    <i class="fa-solid fa-circle-info text-info fs-lg ms-1" style="cursor:help;" data-bs-toggle="tooltip" data-bs-placement="top" title="Kata Laluan Haruslah Terdiri Daripada 8 hingga 12 Aksara Yang Mengandungi Nombor (0-9). Huruf Besar dan Huruf Kecil (A-Z, a-z) dan Simbol"></i>
                                </label>
                                <div class="position-relative">
                                    <input type="password" name="password" class="form-control" id="password" required style="padding-right: 45px;">
                                    <span id="togglePassword" class="position-absolute top-50 translate-middle-y" style="right: 15px; cursor: pointer; z-index: 10;">
                                        <i class="fas fa-eye-slash"></i>
                                    </span>
                                </div>
                                <span class="error-text" role="alert"></span>
                            </div>
                            <div class="col-12 col-md-6 form-group position-relative">
                                <label for="email" class="form-label">E-mel <span class="required-field">*</span>
                                    <i class="fa-solid fa-circle-info text-info fs-lg ms-1" style="cursor:help;" data-bs-toggle="tooltip" data-bs-placement="top" title="Sila Gunakan E-mel Yang Sah"></i>
                                </label>
                                <input type="email" name="email" class="form-control" id="email" value="{{ old('email') }}" required>
                                <span class="error-text" role="alert"></span>
                            </div>
                            <div class="col-12 col-md-6 form-group position-relative">
                                <label for="no_tel" class="form-label">No. Telefon <span class="required-field">*</span>
                                    <i class="fa-solid fa-circle-info text-info fs-lg ms-1" style="cursor:help;" data-bs-toggle="tooltip" data-bs-placement="top" title="Sila Masukkan Nombor Telefon Tanpa (-) Dan Kod Depan. (E.g: 0123456789)"></i>
                                </label>
                                <input type="text" name="no_tel" class="form-control" id="no_tel" value="{{ old('no_tel') }}" data-maska="60 ##########" required>
                                <span class="error-text" role="alert"></span>
                            </div>
                            <div class="col-12 col-md-6 mb-3 form-group position-relative">
                                <fieldset class="row mb-3">
                                    <legend class="col-form-label pt-0">Tempat Bertugas <span class="required-field">*</span>
                                        <i class="fa-solid fa-circle-info text-info fs-lg ms-1" style="cursor:help;" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="IPJSM : Bahagian / Seksyen / Unit<br>JPN : Daerah Hutan / Bahagian / Seksyen / Unit"></i>
                                    </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" checked>
                                            <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">
                                            <label class="form-check-label" for="user_category2"> JPN</label>
                                        </div>
                                    </div>
                                </fieldset>
                                <span class="error-text" role="alert"></span>
                            </div>

                            <div class="row mb-3" id="negeri_form" style="display:none;">
                                <label class="col-sm-4 col-form-label">Negeri <span class="required-field">*</span></label>
                                <div class="col-sm-8">
                                    <select class="form-select select-2" id="negeri_id" name="negeri_id" aria-label="Default select example">
                                        <option value="">--- Senarai Negeri ---</option>
                                        @foreach (\App\Models\Negeri::all() as $value)
                                            <option value="{{ $value->id }}"
                                                @if (old('negeri_id') == $value->id) selected @endif>
                                                {{ $value->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <span class="error-text" role="alert"></span>
                                </div>
                            </div>
                            <div class="row mb-3" id="daerah_form" style="display:none;">
                                <label class="col-sm-4 col-form-label">Daerah / Jajahan Hutan <span class="required-field">*</span></label>
                                <div class="col-sm-8">
                                    <select class="form-select select-2" id="daerah_hutan_id" name="daerah_hutan_id" aria-label="Default select example"></select>
                                    <span class="error-text" role="alert"></span>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label class="col-sm-4 col-form-label">Bahagian <span class="required-field">*</span></label>
                                <div class="col-sm-8">
                                    <select class="form-select select-2" id="bahagian_id" name="bahagian_id" aria-label="Default select example" required>
                                        <option value="" selected disabled>--- Senarai Bahagian ---</option>
                                    </select>
                                    <span class="error-text" role="alert"></span>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label class="col-sm-4 col-form-label">Seksyen / Unit <span class="required-field">*</span></label>
                                <div class="col-sm-8">
                                    <select class="form-select select-2" id="unit_id" name="unit_id" aria-label="Default select example">
                                        <option value="" selected disabled>--- Pilih Unit ---</option>
                                    </select>
                                    <span class="error-text" role="alert"></span>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label class="col-sm-4 col-form-label">Jawatan <span class="required-field">*</span></label>
                                <div class="col-sm-8">
                                    <select class="form-select select-2" id="jawatan_id" name="jawatan_id" aria-label="Default select example">
                                        <option value="" selected disabled>--- Pilih Jawatan ---</option>
                                    </select>
                                    <span class="error-text" role="alert"></span>
                                </div>
                            </div>
                            <div class="text-center">
                                <button class="btn btn-primary mx-1" type="submit">Daftar</button>
                                <button class="btn btn-outline-danger mx-1" type="button" id="kembaliBtn">Kembali</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $('#register-form').submit(function(e) {
            e.preventDefault();
            let formData = new FormData(this);
            $('#loading-indicator').show();
            $.ajax({
                data: formData,
                url: "{{ route('register.post') }}",
                type: "POST",
                dataType: 'json',
                contentType: false,
                cache: false,
                processData: false,
                success: function(data) {
                    $('#loading-indicator').hide();

                    Swal.fire({
                        icon: 'success',
                        html: 'Maklumat Pendaftaran<br>Telah Berjaya Dihantar',
                        showConfirmButton: true,
                    }).then(function() {
                        window.location.href = "{{ route('login') }}";
                    });

                },
                error: function(reject) {
                    $('#loading-indicator').hide();

                    $(".is-invalid").removeClass("is-invalid");
                    $(".select2-selection").removeClass("is-invalid");
                    $(".error-text").html('');

                    $.each(reject.responseJSON.errors, function(key, value) {
                        let element = $("#" + key);
                        if (element.length === 0) {
                            element = $('[name="' + key + '"]');
                        }

                        element.addClass("is-invalid");

                        // Special handling for Select2
                        if (element.hasClass("select-2") && element.next('.select2-container').length > 0) {
                            element.next('.select2-container').find('.select2-selection').addClass('is-invalid');
                        }

                        // Find the error text span
                        let errorSpan = element.closest('.col-sm-8, .form-group').find(".error-text");
                        if (errorSpan.length === 0) {
                            errorSpan = element.nextAll(".error-text").first();
                        }

                        let multiError = Array.isArray(value) ? value.join('<br>') : value;
                        errorSpan.html(multiError);
                    });
                }
            });
        });
    </script>

    <script>

        // Phone number validation
        $('#no_tel').on('input', function() {
            $(this).val($(this).val().replace(/[^\d]/g, ''));
        });

        // User category change
        $('input[name=user_category]').change(function() {
            $("#bahagian_id").html('<option value="" selected disabled>--- Senarai Bahagian ---</option>');
            $("#unit_id").html('<option value="" selected disabled>--- Pilih Unit ---</option>');

            if ($(this).attr("id") == "user_category2") {
                $('#negeri_form').show();
                $('#daerah_form').show();
                let nId = $("#negeri_id").val();
                if (nId) fetchBahagian(nId);
            } else {
                $('#negeri_form').hide();
                $('#daerah_form').hide();
                fetchBahagian(null);
            }
        });

        let negeriId = "{{ old('negeri_id') }}";
        let daerahHutanId = "{{ old('daerah_hutan_id') }}";

        // Filter Daerah Dropdown
        if (negeriId != null) {
            $.ajax({
                url: "{{ route('fetch_daerah') }}",
                type: "POST",
                data: {
                    negeri_id: negeriId,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(result) {
                    $.each(result.daerah, function(key, value) {

                        let selected = '';
                        if (value.id == daerahHutanId)
                            selected = ' selected';

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

        $(document).ready(function() {

            // Filter Daerah Dropdown
            $('#negeri_id').on('change', function() {
                let negeri_id = this.value;
                $("#daerah_hutan_id").html('');
                $("#bahagian_id").html('<option value="" selected disabled>--- Senarai Bahagian ---</option>');
                $("#unit_id").html('<option value="" selected disabled>--- Pilih Unit ---</option>');
                
                if (negeri_id) {
                    fetchBahagian(negeri_id);
                }

                $.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_hutan_id").append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    }
                });
            });

            let bahagianId = "{{ old('bahagian_id') }}";
            let unitId = "{{ old('unit_id') }}";
            let jawatanId = "{{ old('jawatan_id') }}";

            fetchJawatan(jawatanId);

            // Load units if bahagian is already selected (form validation failed)
            if (bahagianId) {
                fetchUnits(bahagianId, unitId);
            }

            // Determine user category on load to fetch bahagian
            let userCat = $("input[name='user_category']:checked").val();
            if (userCat == 1) {
                fetchBahagian(null, bahagianId);
            } else if (userCat == 2 && negeriId) {
                fetchBahagian(negeriId, bahagianId);
            }

            // Bahagian dropdown
            $('#bahagian_id').on('change', function() {
                let bahagian_id = this.value;
                $("#unit_id").html('<option value="" disabled>--- Pilih Unit ---</option>');

                if (bahagian_id) {
                    fetchUnits(bahagian_id);
                }
            });
        });

        // Fetch bahagian
        function fetchBahagian(negeri_id, selectedBahagianId = null) {
            $.ajax({
                url: "{{ route('fetch_bahagian') }}",
                type: "POST",
                data: {
                    negeri_id: negeri_id,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(result) {
                    let options = '<option value="" selected disabled>--- Senarai Bahagian ---</option>';
                    $.each(result.bahagian, function(key, value) {
                        let selected = (selectedBahagianId && value.id == selectedBahagianId) ? ' selected' : '';
                        options += `<option value="${value.id}"${selected}>${value.name}</option>`;
                    });
                    $("#bahagian_id").html(options);
                },
                error: function(xhr, status, error) {
                    console.error("Error fetching bahagian:", error);
                }
            });
        }

        // Fetch units
        function fetchUnits(bahagian_id, selectedUnitId = null) {
            $.ajax({
                url: "{{ route('fetch_unit') }}",
                type: "POST",
                data: {
                    bahagian_id: bahagian_id,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(result) {
                    let options = '<option value="" selected disabled>--- Pilih Unit ---</option>';
                    $.each(result.unit, function(key, value) {
                        let selected = (selectedUnitId && value.id == selectedUnitId) ?
                            ' selected' : '';
                        options +=
                            `<option value="${value.id}"${selected}>${value.name}</option>`;
                    });
                    $("#unit_id").html(options);
                },
                error: function(xhr, status, error) {
                    console.error("Error fetching units:", error);
                }
            });
        }

        // Fetch jawatan
        function fetchJawatan(selectedJawatanId = null) {
            $.ajax({
                url: "{{ route('fetch_jawatan') }}",
                type: "POST",
                data: {
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(result) {
                    let options = '<option value="" selected disabled>--- Pilih Jawatan ---</option>';
                    $.each(result.jawatan, function(key, value) {
                        let selected = (selectedJawatanId && value.id ==
                            selectedJawatanId) ? ' selected' : '';
                        options +=
                            `<option value="${value.id}"${selected}>${value.name}</option>`;
                    });
                    $("#jawatan_id").html(options);
                },
                error: function(xhr, status, error) {
                    console.error("Error fetching jawatan:", error);
                }
            });
        }

        // Toggle password visibility
        document.getElementById('togglePassword').addEventListener('click', function() {
            let password = document.getElementById('password');
            let eyeIcon = this.querySelector('i');

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

        // Back button
        document.querySelector('#kembaliBtn').addEventListener('click', function() {
            Swal.fire({
                title: "Adakah Anda Ingin Membatalkan Pendaftaran Ini ?",
                showCancelButton: true,
                confirmButtonColor: "#0d6efd",
                confirmButtonText: "Ya",
                cancelButtonColor: "#6c757d",
                cancelButtonText: "Tidak",
            }).then((result) => {
                if (result.isConfirmed) {
                    window.history.back();
                }
            });
        });

    </script>
@endpush