@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 Menu Grp</h4>
                    <nav style="--bs-breadcrumb-divider: '|';"  aria-label="breadcrumb" >
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{route('menugrp.index')}}" class="text-primary">Menu Grp</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->menu_grp_name ?? ''}}" placeholder="Name" >
                                </div>
                                <div class="col-lg-12">
                                    <label for="name">Menus<span class="required-sign ">*</span></label>
                                    @foreach (getMenu() as $menu)
                                        <div class="col-md-4 mb-2">
                                            <div class="form-check">
                                                <input
                                                    type="checkbox"
                                                    class="form-check-input"
                                                    id="menu_{{ $menu->id }}"
                                                    name="menus[]"
                                                    value="{{ $menu->id }}"
                                                    {{-- if you want to preselect user menus --}}
                                                    @if(!empty($userMenus) && in_array($menu->id, $userMenus)) checked @endif
                                                >
                                                <label class="form-check-label" for="menu_{{ $menu->id }}">
                                                    {{ $menu->label }}
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="col-lg-12">
                                    <label for="name">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('menugrp.update', ':id') }}".replace(':id', id) : "{{ route('menugrp.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
