@extends('layouts.admin.master')

@section('title', 'Member')
@push('css')
    <link rel="stylesheet" href="{{ asset('/assets/css/datepicker.css') }}"/>
    <style>
        .is-invalid {
            border-color: var(--color-primary) !important;
        }
    </style>
@endpush
@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="">
                    <h4 class="mb-1">Create User</h4>
                    <nav style="--bs-breadcrumb-divider: '|';"  aria-label="breadcrumb" >
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{route('user.index')}}" class="text-primary">User</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Create</li>
                        </ol>
                    </nav>
                </div>
            </div>

            <div class="row">
                <div class="mt-4">
                    <div class="col-8">
                        <div class="card myCard form-main-div">
                            <form id="userForm">
                                <div class="row g-3">
                                    <div class="col-lg-12">
                                        @csrf
                                        <input type="hidden" name="id" value="{{ $user->id ?? '' }}">
                                        <label for="name">Name<span class="required-sign ">*</span></label>
                                        <input type="text" class="form-control" id="name" name="name" value="{{$user->name ?? ''}}" placeholder="Name" >
                                    </div>
                                    <div class="col-lg-12">
                                        <label for="phone">Phone</label>
                                        <input type="text" class="form-control" id="phone" name="phone" value="{{$user->phone ?? ''}}" placeholder="Phone" >
                                    </div>
                                    <div class="col-lg-12">
                                        <label for="name">Email<span class="required-sign ">*</span></label>
                                        <input type="text" class="form-control" id="email" name="email" value="{{$user->email ?? ''}}" placeholder="Email" >
                                    </div>
                                    <div class="col-lg-12">
                                        <label for="password">Password<span class="required-sign ">*</span></label>
                                        <input type="password" class="form-control" id="password" name="password" value="{{$user->password ?? ''}}" placeholder="Password" >
                                    </div>
                                    <div class="col-lg-12">
                                        <label for="user-type">User Type<span class="required-sign ">*</span></label>
                                        <select name="user_type" class="form-select" id="user-type">
                                            <option value="cm" {{isset($user) && $user->user_type == "cm" ? 'selected' :''}}>CM</option>
                                            <option value="cc" {{isset($user) && $user->user_type == "cc" ? 'selected' :''}}>CC</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-12">
                                        <label for="menu-grp">Menu Grp<span class="required-sign ">*</span></label>
                                        <select name="menu_grp" class="form-select" id="menu-grp">
                                            @foreach(getMenuGrp() as $key => $val)
                                                <option value="{{$val->id}}" {{isset($user) && $user->menu_grp == $key ? 'selected' :''}}>{{$val->menu_grp_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-12">
                                        <label for="status">Status<span class="required-sign ">*</span></label>
                                        <select name="status" class="form-select" id="status">
                                            @foreach(config('constant.NON_STATUS') as $key => $val)
                                                <option value="{{$key}}" {{isset($user) && $user->status == $key ? 'selected' :''}}>{{$val}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mt-4">
                                        <div>
                                            <button class="btn btn-secondary px-4">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            $(document).ready(function() {

                $('#userForm').on('submit', function(e) {
                    e.preventDefault();

                    let formData = new FormData(this);
                    let id = $('input[name="id"]').val();
                    let url = id ? "{{ route('user.update', ':id') }}".replace(':id', id) : "{{ route('user.store') }}";

                    $.ajax({
                        url: url,
                        method: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            notification('success',response.message,'success',2000)
                            if (!id) $('#userForm')[0].reset(); // clear form on create
                        },
                        error: function(xhr) {
                            let msg = 'Something went wrong.';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                msg = xhr.responseJSON.message;
                            }
                            notification('error',msg,'danger',2000)
                        }
                    });
                });
            });
        </script>
    @endpush
@endsection
