@extends('layouts.master')
@section('title', 'Add New User')
@section('content')
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="row">
                                <div class="col-md-12">
                                    <h6 class="mb-0">Add New User</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body px-3 pt-4 pb-2">
                        <form action="{{ route('users.store') }}" method="POST">
                            @csrf
                            <div class="form-outline mb-4">
                                <label class="form-label" for="name">Name</label>
                                <input type="text" name="name" class="form-control" placeholder="Name" value="{{ old('name') }}" aria-label="Name" aria-describedby="name-addon">
                                @error('name')
                                <span class="invalid_feedback">
                                    <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-outline mb-4">
                                <label class="form-label" for="role">Role</label>
                                <select class="form-select select2 p-2" name="role" required style="width: 100%">
                                    <option value="{{ \App\Models\User::COMPANY_GROUP_ADMIN }}" @selected(old('role') == \App\Models\User::COMPANY_GROUP_ADMIN)>Company Group Admin</option>
                                    <option value="{{ \App\Models\User::COMPANY_ADMIN }}" @selected(old('role') == \App\Models\User::COMPANY_ADMIN)>Company Admin</option>
                                    <option value="{{ \App\Models\User::COMPANY_STAFF }}" @selected(old('role') == \App\Models\User::COMPANY_STAFF)>Company Staff</option>
                                </select>
                                @error('role')
                                <span class="invalid_feedback">
                                      <strong class="text-danger text-sm">{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-outline mb-4" {{ auth()->user()->hasRole(\App\Models\User::SUPER_ADMIN) ? '' : 'hidden' }}>
                                <label class="form-label" for="company-groups">Company Groups</label>
                                <select class="form-select select2 p-2 company-groups" required name="company_group_id" style="width: 100%">
                                    @foreach($companyGroups as $companyGroup)
                                    <option @selected(old('company_group_id') == $companyGroup->id) value="{{ $companyGroup->id }}">{{ $companyGroup->name }}</option>
                                    @endforeach
                                </select>
                                @error('company_group_id')
                                <span class="invalid_feedback">
                                    <strong class="text-danger text-sm">{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-outline mb-4 companies">
                                <label class="form-label" for="company">Company</label>
                                <select class="form-select select2 p-2 get-companies-data" name="company_id" style="width: 100%">
                                </select>
                                @error('company_id')
                                <span class="invalid_feedback">
                                      <strong class="text-danger text-sm">{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-outline mb-4 company_group_user_div">
                                <label class="form-label" for="company_group_user">Company Group User</label>
                                <div class="form-check form-switch d-inline-block ms-3">
                                    <input type="checkbox" class="form-check-input company_group_user" name="company_group_user" value="0" @checked(old('company_group_user', 0) == 1) style="cursor: pointer;">
                                    <label for="company_group_user" class="form-check-label"></label>
                                </div>
                                @error('company_group_user')
                                <span class="invalid_feedback">
                                      <strong class="text-danger text-sm">{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-outline mb-4">
                                <label class="form-label" for="email">Email</label>
                                <input type="email" name="email" class="form-control" placeholder="Email" value="{{ old('email') }}" aria-label="Email" aria-describedby="email-addon">
                                @error('email')
                                <span class="invalid_feedback">
                                    <strong class="text-danger text-sm">{{ $message }}</strong>
                                 </span>
                                @enderror
                            </div>
                            <div class="form-outline mb-4">
                                <label class="form-label" for="password">Password</label>
                                <input type="text" name="password" class="form-control" placeholder="Password" aria-label="Password" aria-describedby="password-addon">
                                @error('password')
                                <span class="invalid_feedback">
                                    <strong class="text-danger text-sm">{{ $message }}</strong>
                                 </span>
                                @enderror
                            </div>
                            <div class="form-outline mb-4">
                                <label class="form-label" for="status">Status</label>
                                <div class="form-check form-switch d-inline-block ms-3">
                                    <input type="checkbox" class="form-check-input user-status" name="status" value="1" @checked(old('status', 1) == 1) style="cursor: pointer;">
                                    <label for="user_status" class="form-check-label"></label>
                                </div>
                                @error('status')
                                <span class="invalid_feedback">
                                      <strong class="text-danger text-sm">{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary btn-block mb-4 me-2">Save</button>
                                <a class="btn btn-secondary btn-block mb-4" href="{{ route('users.index') }}">Cancel</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $('.company-groups').change( function() {
            let id = $(this).val();
            var company = {{ old('company_id', 0) }};
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var company_dropdown = $('select[name="company_id"]');
            company_dropdown.empty().prop('disabled', true);

            $.ajax({
                url: "{{ route('users.companies.data') }}",
                type: "GET",
                dataType: "json",
                data: {
                    'id': id
                },
                success: function(res) {
                    $.each(res.companies, function (index, value) {
                        company_dropdown.append(`<option value='${index}'>${value}</option>`);
                    });
                    if(company)
                        company_dropdown.val(company);
                    company_dropdown.prop('disabled', false).trigger('change');
                },
                error: function error() {
                    toastr.error("Something went wrong. Please try again.");
                }
            });
        }).change();


        $('select[name="role"]').change(function () {
            $(".companies, .company_group_user_div").toggle($(this).val() != '{{ \App\Models\User::COMPANY_GROUP_ADMIN }}');
        }).change();

        $('.user-status, .company_group_user').change(function () {
            $(this).val($(this).prop('checked') ? 1 : 0);
        }).change();
        
    </script>
@endpush