@extends('layouts.master')
@extends('sidebar.dashboard')

@section('page-style')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

<style>
    .form-check-label {
        text-transform: capitalize;
    }

    .alert-danger {
        background-color: #fff !important;
        padding-left: 18px;
    }

    .alert-primary {
        background-color: #fff !important;
        padding-left: 7px;
    }
</style>
@endsection


@section('content')


<div class="row">
    <div class="col-12">
        <div class="card">

            <div class="card-body">
                <div class="row">
                    <div class="col-lg-8 mx-auto">



                        <div class="card-header">
                            <h4 class="card-title" style="margin-left: -20px;">Create User</h4>
                            <span class="float-right">

                                <a class="btn btn-primary text-white" href="{{ route('users.index') }}">Back</a>

                            </span>
                        </div>

                        @include('layouts.messages')

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

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <strong><label class="form-label" for="fullname">Role</label></strong>
                                    <select class="form-select user_role" id="user_role" name="user_role" required>
                                        <option value="">--Select Role--</option>
                                        <option value="Super Admin">Super Admin</option>
                                        <option value="Admin">Admin</option>
                                        <option value="Profit Center">Profit Center</option>
                                        <option value="Outlet">Outlet</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <strong><label class="form-label" for="phone">Name</label></strong>
                                    <input required type="text" id="name" name="name" class="name form-control" placeholder="Name" autocomplete="no-fill" />
                                </div>
                                <div class="col-md-6">
                                    <strong><label class="form-label" for="email">Email</label></strong>
                                    <input required type="text" id="email" name="email" class="email form-control" placeholder="Email" />
                                </div>
                                <div class="col-md-6">
                                    <strong> <label class="form-label" for="phone">Location</label></strong>
                                    <select class="form-select u_loc_id" id="u_loc_id" name="u_loc_id" required>
                                        <option value="">--Select Location--</option>
                                        @foreach ($locations as $location)
                                        <option value="{{$location->id}}">{{$location->l_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <strong> <label class="form-label" for="alt-num">Password</label></strong>
                                    <input type="password" class="form-control" id="password" name="password" placeholder="Enter Password">
                                </div>
                                <div class="col-md-6">
                                    <strong> <label class="form-label" for="alt-num">Confirm Password</label></strong>
                                    <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Enter Password">
                                </div>

                                <div class="col-md-6 pcusers" style="display: none;">
                                    <strong> <label class="form-label" for="phone">Profit Center</label></strong>
                                    <select class="form-select u_pc_id" id="u_pc_id" name="u_pc_id">
                                        <option value="">-- Select Profit Center --</option>
                                        @foreach ($assets as $asset)
                                        <option value="{{$asset->id}}">{{$asset->a_name}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6 outletusers" style="display: none;">
                                    <strong><label class="form-label" for="phone">Outlet</label> </strong>
                                    <select class="form-select u_outlet_id" id="u_outlet_id" name="u_outlet_id">
                                        <option value="">--Select Outlet--</option>
                                    </select>
                                </div>




                            </div>

                            <button type="submit" class="btn btn-primary mt-4 pr-4 pl-4">Add</button>

                        </form>


                    </div>
                </div>
            </div>
        </div>
    </div>
</div>





@endsection

@section('page-script')
<!-- Page js files -->


<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('.select2').select2();
    })

    $(document).ready(function() {
        // Department Change
        $('.user_role').change(function() {
            var id = $(this).val();

            // alert(id);

            if (id == 'Profit Center') {
                $(".u_pc_id").prop('required',true);
                $('.pcusers').show();
                $('.outletusers').hide();

            } else if (id == 'Outlet') {
                $(".u_pc_id").prop('required',true);
                $(".u_outlet_id").prop('required',true);
                $('.pcusers').show();
                $('.outletusers').show();
            } else {
                $('.pcusers').hide();
                $('.outletusers').hide();

            }
        });




        $('.u_pc_id').change(function() {

            // Department id
            var pid = $(this).val();

            // alert(pid);

            // Empty the dropdown
            $('.u_outlet_id').find('option').not(':first').remove();

            var purl = '{{ route("getOutlets", ":id") }}';
            purl = purl.replace(':id', pid);


            // AJAX request 
            $.ajax({
                url: purl,
                type: 'get',
                dataType: 'json',
                success: function(response) {

                    var len = 0;
                    if (response['data'] != null) {
                        len = response['data'].length;
                    }

                    if (len > 0) {
                        // Read data and create <option >
                        for (var i = 0; i < len; i++) {

                            var id = response['data'][i].Id;
                            var name = response['data'][i].StoreName;

                            var option = "<option value='" + id + "'>" + name + "</option>";

                            $(".u_outlet_id").append(option);
                        }
                    }

             

                }
            });
        });



    });
</script>


@endsection