@extends('layouts.app')

@section('content')
    <div class="page-wrapper">
        <!-- Page-header start -->
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-breadcrumb-wrp">
                        <div class="page-header-breadcrumb">
                            <ul class="breadcrumb-title">
                                <li class="breadcrumb-item">
                                    <a href="{{ url('') }}"> <i class="feather icon-home"></i> </a>
                                </li>
                                <li class="breadcrumb-item"><a href="{{ url('users') }}">{{ __('Manage User') }}</a></li>
                                <li class="breadcrumb-item">{{ __('Add') }}</li>
                            </ul>
                        </div>
                        <div class="page-header-title">
                            <div class="d-inline">
                                <h4>Add Program</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page-header end -->

        <!-- Page-body start -->
        <div class="page-body">
            @php $user = \Auth::user(); @endphp
            <div class="row">
                <div class="col-sm-12">
                    <!-- Zero config.table start -->
                    <div class="card">
                        <div class="card-block">
                            <div class="mT-30">
                                @include('common.error')

                                <form class="" method="POST" action="{{ route('users.store') }}"
                                    id="needs-validation" autocomplete="off">
                                    @csrf

                                    <input type="hidden" name="id"
                                        value="{{ !empty($user_details->id) ? $user_details->id : '' }}">

                                    <input type="hidden" class="form-control username" name="username"
                                        value="{{ old('username') }}" autocomplete="off">
                                    <div class="row">

                                        <div class="col-md-6 mb-3">
                                            <label for="validationCustom02">Role<span class="red">*</span></label>
                                            <select class="form-control select" name="role_id" id="role_id" required>
                                                <option value="">-- Select --</option>
                                                @foreach ($roles_list as $role)
                                                    <option value="{{ $role->role_id }}"
                                                        {{ old('role_id') == $role->role_id ? 'selected' : '' }}>
                                                        {{ $role->role_name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label for="validationCustom02">Name<span class="red">*</span></label>
                                            <input type="text" class="form-control onlyalpha" name="name"
                                                value="{{ old('name') }}" autocomplete="off" required>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label for="validationCustom02">Email</label>
                                            <input type="email" class="form-control sector_id" name="email"
                                                id="email" value="{{ old('email') }}" autocomplete="off">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="validationCustom02">Mobile number</label>
                                            <input type="text" class="form-control phone" name="mobile_number"
                                                value="{{ old('phone') }}" autocomplete="off" maxlength="10">
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label for="validationCustom02">Username<span class="red">*</span></label>
                                            <input type="text" class="form-control" name="username" id="username"
                                                value="{{ old('username') }}" autocomplete="off" required>
                                        </div>

                                        <div class="col-md-6 mb-3 state_id_div" style="display: none">
                                            <label for="validationCustom02">State<span class="red">*</span></label>
                                            <select class="form-control select" name="state_id" id="state_id">
                                                <option value="">--Select--</option>
                                                @foreach ($mst_states_list as $state)
                                                    <option value="{{ $state->state_id }}"
                                                        {{ $state->state_id == $user->state_id ? 'selected' : '' }}>
                                                        {{ $state->state_name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        {{-- <div class="col-md-6 mb-3 
                                        ">
                                            <label for="validationCustom02">State<span class="red">*</span></label>
                                            <select class="form-control select" name="
                                            " id="
                                            ">
                                                <option value="">--Select--</option>
                                                @foreach ($mst_states_list as $state)
                                                <option value="{{ $state->state_id }}" {{  ($state->state_id ? "selected":"") }}>{{ $state->state_name }}</option>
                                                @endforeach
                                            </select>
                                        </div> --}}

                                        <div class="col-md-6 mb-3 district_id_div" style="display: none">
                                            <label for="validationCustom02">District<span class="red">*</span></label>
                                            <select class="form-control district_id select" name="district_id"
                                                id="district_id">
                                                <option value="">--Select--</option>
                                            </select>
                                        </div>

                                        <div class="col-md-6 mb-3 block_id_div" style="display: none">
                                            <label for="validationCustom02">Block name<span class="red">*</span></label>
                                            <select class="form-control block_id select" name="block_id" id="block_id">
                                                <option value="">--Select--</option>

                                            </select>
                                        </div>

                                        <div class="col-md-6 mb-3 facility_id_div" style="display: none">
                                            <label for="validationCustom02">Health facility<span
                                                    class="red">*</span></label>
                                            <select class="form-control facility_id select" name="facility_id"
                                                id="facility_id">
                                                <option value="">--Select--</option>
                                            </select>
                                        </div>

                                        <div class="col-md-6 mb-3 supplier_id_div" style="display: none">
                                            <label for="validationCustom02">Supplier<span class="red">*</span></label>
                                            <select class="form-control supplier_id select" name="supplier_id"
                                                id="supplier_id">
                                                <option value="">--Select--</option>
                                            </select>
                                        </div>


                                        <div class="col-md-6 mb-3">
                                            <label for="validationCustom01">Password<span class="red">*</span></label>
                                            <input type="password" class="form-control" name="password"
                                                id="togglePassword" id="password" required autocomplete="off">

                                            <div class="input-group-append toggle-password">
                                                <span class="input-group-text mdi mdi-eye-outline"></span>
                                            </div>

                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="validationCustom02">Confirm password<span
                                                    class="red">*</span></label>
                                            <input type="password" class="form-control" name="password_confirmation"
                                                required autocomplete="off">
                                        </div>

                                        <div class="col-md-6 mb-3 entry_screen_div required" style="display: none">

                                            <input class="form-check-input entry_screen_permission" type="checkbox"
                                                value="1" name="entry_screen_permission[]" id="defaultCheck1">
                                            <label class="form-check-label" for="defaultCheck1">
                                                Oxygen bed occupancy
                                            </label><br>
                                            <input class="form-check-input entry_screen_permission" type="checkbox"
                                                value="2" name="entry_screen_permission[]" id="defaultCheck2">
                                            <label class="form-check-label" for="defaultCheck2">
                                                Disease wise patient occupancy
                                            </label><br>
                                            <input class="form-check-input entry_screen_permission" type="checkbox"
                                                value="3" name="entry_screen_permission[]" id="defaultCheck3">
                                            <label class="form-check-label" for="defaultCheck3">
                                                Manage daily stock
                                            </label>

                                        </div>

                                        <div class="col-md-6 mb-3 remarks_div" style="display: none;">
                                            <label for="validationCustom02">Remarks</label>
                                            <textarea class="form-control remarks" name="remarks" rows="5"></textarea>
                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 mb-3 text-right">
                                            <button class="btn btn-m btn-primary btn_submit" type="submit">Save</button>

                                            <a href="{{ url('users') }}" class="btn btn-m bt btn-danger">Back</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page-body end -->
    </div>


    <script>
        $(document).ready(function() {

            @if ($user->role_id == 7)
                $("#state_id").css({
                    "pointer-events": "none",
                    "touch-action": "none",
                    "background": "#e9ecef"
                });
            @endif

            @if ($user->role_id == 6)
                $("#state_id").css({
                    "pointer-events": "none",
                    "touch-action": "none",
                    "background": "#e9ecef"
                });
                $("#district_id").css({
                    "pointer-events": "none",
                    "touch-action": "none",
                    "background": "#e9ecef"
                });
            @endif

            var role_id = $("#role_id").val();
            if (role_id == 1 || role_id == 8) { //super admin
                $('.state_id_div').hide();
                $('.district_id_div').hide();
                $('.block_id_div').hide();
                $('.facility_id_div').hide();
                $('.supplier_id_div').hide();
                $('.entry_screen_div').hide();
                $('.remarks_div').show();

                $("#state_id").prop('required', false);
                $("#district_id").prop('required', false);
                $("#block_id").prop('required', false);
                $("#facility_id").prop('required', false);
                $("#supplier_id").prop('required', false);
                $(".entry_screen_permission").prop('required', false);

            } else if (role_id == 10) {
                $('.state_id_div').hide();
                $('.district_id_div').hide();
                $('.block_id_div').hide();
                $('.facility_id_div').hide();
                $('.supplier_id_div').hide();
                $('.entry_screen_div').show();
                $('.remarks_div').show();

                $("#state_id").prop('required', false);
                $("#district_id").prop('required', false);
                $("#block_id").prop('required', false);
                $("#facility_id").prop('required', false);
                $("#supplier_id").prop('required', false);
                $(".entry_screen_permission").prop('required', true);

            } else if (role_id == 2) { //health facility
                //alert(role_id);
                $('.state_id_div').show();
                $('.district_id_div').show();
                $('.block_id_div').show();
                $('.facility_id_div').show();
                $('.supplier_id_div').hide();
                $('.entry_screen_div').hide();
                $('.remarks_div').hide();

                $("#state_id").prop('required', true);
                $("#district_id").prop('required', true);
                $("#block_id").prop('required', true);
                $("#facility_id").prop('required', true);
                $("#supplier_id").prop('required', false);
                $(".entry_screen_permission").prop('required', false);

                // $("#state_id").val('');
                // $("#district_id").val('');
                $("#block_id").val('');
                $("#supplier_id").val('');
            } else if (role_id == 3) { //health facility
                //alert(role_id);
                $('.state_id_div').show();
                $('.district_id_div').show();
                $('.block_id_div').show();
                $('.facility_id_div').hide();
                $('.supplier_id_div').show();
                $('.entry_screen_div').hide();
                $('.remarks_div').hide();

                $("#state_id").prop('required', true);
                $("#district_id").prop('required', true);
                $("#block_id").prop('required', true);
                $("#facility_id").prop('required', false);
                $("#supplier_id").prop('required', true);
                $(".entry_screen_permission").prop('required', false);

                // $("#state_id").val('');
                // $("#district_id").val('');
                $("#block_id").val('');
                $("#facility_id").val('');
            } else if (role_id == 6 || role_id == 5 || role_id == 4 || role_id == 9 || role_id == 13 || role_id ==
                14) { //district user
                $('.state_id_div').show();
                $('.district_id_div').show();
                $('.block_id_div').hide();
                $('.facility_id_div').hide();
                $('.supplier_id_div').hide();
                $('.entry_screen_div').hide();
                $('.remarks_div').hide();

                $("#state_id").prop('required', true);
                $("#district_id").prop('required', true);
                $("#block_id").prop('required', false);
                $("#facility_id").prop('required', false);
                $("#supplier_id").prop('required', false);
                $(".entry_screen_permission").prop('required', false);
            } else if (role_id == 7 || role_id == 11 || role_id == 12) { //state user
                $('.state_id_div').show();
                $('.district_id_div').hide();
                $('.block_id_div').hide();
                $('.facility_id_div').hide();
                $('.supplier_id_div').hide();
                $('.entry_screen_div').hide();
                $('.remarks_div').hide();

                // $("#state_id").prop('required', true);
                $("#district_id").prop('required', false);
                $("#block_id").prop('required', false);
                $("#facility_id").prop('required', false);
                $("#supplier_id").prop('required', false);
                $(".entry_screen_permission").prop('required', false);
            }

            $('input').attr('autocomplete', 'off');

            $('button[type="submit"]').on('click', function() {

                $cbx_group = $("input:checkbox[name='entry_screen_permission[]']");
                //$cbx_group = $("input:checkbox[id^='option-']"); // name is not always helpful ;)
                var role_id = $("#role_id").val();
                // alert('hi');


                $cbx_group.prop('required', true);
                if ($cbx_group.is(":checked") || role_id == 2 || role_id == 3 || role_id == 6 || role_id ==
                    7 || role_id == 8 || role_id == 11 || role_id == 12 || role_id == 13 || role_id == 14) {
                    // alert('hi');
                    $cbx_group.prop('required', false);
                }
            });

            $('#role_id').on('change', function(e) {

                var role_id = $(this).val();
                if (role_id == 1 || role_id == 8) { //super admin
                    $('.state_id_div').hide();
                    $('.district_id_div').hide();
                    $('.block_id_div').hide();
                    $('.facility_id_div').hide();
                    $('.supplier_id_div').hide();
                    $('.entry_screen_div').hide();
                    $('.remarks_div').hide();

                    $("#state_id").prop('required', false);
                    $("#district_id").prop('required', false);
                    $("#block_id").prop('required', false);
                    $("#facility_id").prop('required', false);
                    $("#supplier_id").prop('required', false);
                    $(".entry_screen_permission").prop('required', false);

                } else if (role_id == 10) {
                    $('.state_id_div').hide();
                    $('.district_id_div').hide();
                    $('.block_id_div').hide();
                    $('.facility_id_div').hide();
                    $('.supplier_id_div').hide();
                    $('.entry_screen_div').show();
                    $('.remarks_div').show();

                    $("#state_id").prop('required', false);
                    $("#district_id").prop('required', false);
                    $("#block_id").prop('required', false);
                    $("#facility_id").prop('required', false);
                    $("#supplier_id").prop('required', false);
                    $(".entry_screen_permission").prop('required', true);

                } else if (role_id == 2) { //health facility
                    //alert(role_id);
                    $('.state_id_div').show();
                    $('.district_id_div').show();
                    $('.block_id_div').show();
                    $('.facility_id_div').show();
                    $('.supplier_id_div').hide();
                    $('.entry_screen_div').hide();
                    $('.remarks_div').hide();

                    $("#state_id").prop('required', true);
                    $("#district_id").prop('required', true);
                    $("#block_id").prop('required', true);
                    $("#facility_id").prop('required', true);
                    $("#supplier_id").prop('required', false);
                    $(".entry_screen_permission").prop('required', false);

                    // $("#state_id").val('');
                    // $("#district_id").val('');
                    $("#block_id").val('');
                    $("#supplier_id").val('');
                } else if (role_id == 3) { //health facility
                    //alert(role_id);
                    $('.state_id_div').show();
                    $('.district_id_div').show();
                    $('.block_id_div').show();
                    $('.facility_id_div').hide();
                    $('.supplier_id_div').show();
                    $('.entry_screen_div').hide();
                    $('.remarks_div').hide();

                    $("#state_id").prop('required', true);
                    $("#district_id").prop('required', true);
                    $("#block_id").prop('required', true);
                    $("#facility_id").prop('required', false);
                    $("#supplier_id").prop('required', true);
                    $(".entry_screen_permission").prop('required', false);

                    // $("#state_id").val('');
                    // $("#district_id").val('');
                    $("#block_id").val('');
                    $("#facility_id").val('');
                } else if (role_id == 6 || role_id == 5 || role_id == 4 || role_id == 9 || role_id == 13 ||
                    role_id == 14) { //district user
                    $('.state_id_div').show();
                    $('.district_id_div').show();
                    $('.block_id_div').hide();
                    $('.facility_id_div').hide();
                    $('.supplier_id_div').hide();
                    $('.entry_screen_div').hide();
                    $('.remarks_div').hide();

                    $("#state_id").prop('required', true);
                    $("#district_id").prop('required', true);
                    $("#block_id").prop('required', false);
                    $("#facility_id").prop('required', false);
                    $("#supplier_id").prop('required', false);
                    $(".entry_screen_permission").prop('required', false);

                } else if (role_id == 7 || role_id == 11 || role_id == 12) { //state user
                    $('.state_id_div').show();
                    $('.district_id_div').hide();
                    $('.block_id_div').hide();
                    $('.facility_id_div').hide();
                    $('.supplier_id_div').hide();
                    $('.entry_screen_div').hide();
                    $('.remarks_div').hide();

                    // $("#state_id").prop('required', true);
                    $("#district_id").prop('required', false);
                    $("#block_id").prop('required', false);
                    $("#facility_id").prop('required', false);
                    $("#supplier_id").prop('required', false);
                    $(".entry_screen_permission").prop('required', false);

                }

            });

            $('#state_id').on('change', function(e) {
                var state_id = $(this).val();
                sessionStorage.setItem("st", state_id);
                // alert(state_id);
                var district_id = '';

                var district_id =
                    @if (!empty($user_details->district_id) && $user_details->district_id > 0)
                        {{ $user_details->district_id }}
                    @else
                        {{ $user->district_id }}
                    @endif 

                $.ajax({
                    type: 'GET',
                    url: "/getDistrict",
                    data: {
                        _token: '{{ csrf_token() }}',
                        state_id: state_id,
                        district_id: district_id
                    },
                    success: function(data) {
                        // alert(data);
                        if (data != '') {
                            $('#district_id').html(data);
                            $('#district_id').trigger('change');
                        }
                    }
                });
            });




            $('#district_id').on('change', function(e) {
                var district_id = $(this).val();
                sessionStorage.setItem("di", district_id);
                $.ajax({
                    type: 'GET',
                    url: "/getBlock",
                    data: 'district_id=' + district_id,
                    success: function(data) {
                        if (data != '') {
                            $('#block_id').html(data);

                        }
                    }
                });
            });
            $('#state_id').trigger('change');


            $('#facility_id').on('change', function(e) {
                var facility_id = $(this).val();
                sessionStorage.setItem("SP", facility_id);

            });

            $('#supplier_id').on('change', function(e) {
                var Suplid = $(this).val();
                sessionStorage.setItem("SUP", Suplid);

            });

            $('#block_id').on('change', function(e) {
                var state_id = $("#state_id").val();
                var district_id = $("#district_id").val();
                var block_id = $(this).val();
                sessionStorage.setItem("Bk", block_id);
                var role_id = $("#role_id").val();

                if (role_id == 2) {
                    $.ajax({
                        type: 'GET',
                        url: "/getFacility",
                        data: 'state_id=' + state_id + '&district_id=' + district_id +
                            '&block_id=' + block_id,
                        success: function(data) {
                            if (data != '') {
                                $('#facility_id').html(data);

                            }
                        }
                    });
                }

                if (role_id == 3) {
                    $.ajax({
                        type: 'GET',
                        url: "/getSupplierBlockWise",
                        data: 'state_id=' + state_id + '&district_id=' + district_id +
                            '&block_id=' + block_id,
                        success: function(data) {
                            if (data != '') {
                                $('#supplier_id').html(data);
                            }
                        }
                    });
                }


            });

            $('.phone').bind('keyup', function() {
                var node = $(this);
                node.val(node.val().replace(/[^0-9]/, ''));
            });
            $('.phone').bind('blur', function(e) {
                var regex = new RegExp("^([6-9]{1})([0-9]{9})$");
                var str = $(this).val().toString();
                let m;
                //console.log(regex.exec(str));
                if ((m = regex.exec(str)) !== null) {
                    return true;
                } else {
                    $(this).val('');
                    return false;
                }
            });

        });
    </script>




    <script>
        $('.toggle-password').click(function() {
            $(this).children().toggleClass('mdi-eye-outline mdi-eye-off-outline');
            let input = $(this).prev();
            input.attr('type', input.attr('type') === 'password' ? 'text' : 'password');
        });
    </script>


    <script>
        window.onload = function() {
            $('#role_id').trigger('change');
            //    $('#state_id').trigger('chosen:updated');

            //    alert('hi');



            //alert('in');
            var selItem = sessionStorage.getItem("st");
            var district = sessionStorage.getItem("di");
            var block = sessionStorage.getItem("Bk");
            var facility = sessionStorage.getItem("SP");
            var suplierid = sessionStorage.getItem("SUP");




            var role_id = $('#role_id').val();
            //  $("#state_id").prop('selectedValue', selItem); 

            //alert(selItem);
            if (role_id == 2) {
                $.ajax({
                    type: 'GET',
                    url: "/getFacility",
                    data: 'state_id=' + selItem + '&district_id=' + district + '&block_id=' + block + '&id=' +
                        facility,
                    success: function(data) {
                        // alert(selItem);
                        if (data != '') {
                            // alert(data);
                            $('#facility_id').html(data);

                        }
                    }
                });
            }

            if (role_id == 3) {
                $.ajax({
                    type: 'GET',
                    url: "/getSupplierBlockWise",
                    data: 'state_id=' + selItem + '&district_id=' + district + '&block_id=' + block +
                        '&supplier_id=' + suplierid,
                    success: function(data) {
                        if (data != '') {
                            $('#supplier_id').html(data);
                        }
                    }
                });
            }

            // $('#state_id select').val(selItem).change();'&district_id=' + district


            $.ajax({
                type: 'GET',
                url: "/getDistrict",
                data: 'state_id=' + selItem + '&district_id=' + district,
                success: function(data) {
                    // alert(data);
                    if (data != '') {
                        $('#district_id').html(data);
                        // $('#state_id').trigger('change');
                    }
                }
            });
            // alert(district);
            //$('#district_id option[value="9"]').attr("selected", "selected");
            //$('#district_id').val(district).attr("selected", "selected");

            // $('#district_id').val(district);
            $.ajax({
                type: 'GET',
                url: "/getBlock",
                data: 'district_id=' + district + '&block_id=' + block,
                success: function(data) {
                    if (data != '') {
                        $('#block_id').html(data);

                    }
                }
            });

            //$("#facility_id").val(facility).trigger("chosen:updated");
        }
        // $('#state_id').change(function() { 
        //     var state_id = $(this).val();
        //     var selVal = $(this).val();

        //     sessi//onStorage.setItem("SelItem", selVal);

        // $('#district_id').change(function() { 

        //     var district = $(this).val();

        //     sessionStorage.setItem("District", district);

        // });
        // });


        //         $('#state_id').on('change', function(e) {
        //             var state_id = $(this).val();
        //             // alert(state_id);

        //             $.ajax({
        //                 type: 'GET',
        //                 url: "/getDistrict",
        //                 data: 'state_id=' + state_id,
        //                 success: function(data) {
        //                     // alert(data);
        //                     if (data != '') {
        //                         $('#district_id').html(data);

        //                     }
        //                 }
        //             });
        //         });
    </script>
@endsection