@extends('master')
@section('style')
    <link href="{{asset('assets/custom/css/slimselect.css')}}" rel="stylesheet"/>

@endsection
@section('content')
    <div class="mb-4"></div>
    <div class="container-fluid px-4 mb-4">
        <div class="row justify-content-between">
            <div class="col">
                <div style="font-size: 14px" class="breadcrumb-item">Administrator/Tambah</div>
            </div>
        </div>
    </div>

    <div class="body flex-grow-1">
        <div class="container-lg px-4 py-4">
            <div class="card border-0 shadow-sm rounded-3 h-100">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-3">
                    <h5 class="mb-0 fw-semibold text-dark">Administrator</h5>
                    <p class="text-muted small mb-0 mt-1">Tambah Akun Administrator</p>
                </div>

                <div class="card-body p-4">
                    <form action="{{ route('user.management.admin.add.post') }}" method="POST">
                        @csrf

                        <div class="mb-4">
                            <label class="form-label fw-medium text-dark mb-2" for="name">
                                Nama Lengkap <span class="text-danger">*</span>
                            </label>
                            <input
                                type="text"
                                class="form-control form-control-lg shadow-none border-1 @error('name') is-invalid @enderror"
                                id="name"
                                name="name"
                                placeholder="Masukkan nama lengkap"
                                value="{{ old('name') }}"
                                required>
                            @error('name')
                            <div class="text-danger small mt-2">
                                <i class="bi bi-exclamation-circle me-1"></i> {{ $message }}
                            </div>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-medium text-dark mb-2" for="email">
                                Email <span class="text-danger">*</span>
                            </label>
                            <input
                                type="email"
                                class="form-control form-control-lg shadow-none border-1 @error('email') is-invalid @enderror"
                                id="email"
                                name="email"
                                placeholder="Masukkan email"
                                value="{{ old('email') }}"
                                required>
                            @error('email')
                            <div class="text-danger small mt-2">
                                <i class="bi bi-exclamation-circle me-1"></i> {{ $message }}
                            </div>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-medium text-dark mb-2" for="username">
                                Username <span class="text-danger">*</span>
                            </label>
                            <input
                                type="text"
                                class="form-control form-control-lg shadow-none border-1 @error('username') is-invalid @enderror"
                                id="username"
                                name="username"
                                placeholder="Masukkan username"
                                value="{{ old('username') }}"
                                required>
                            @error('username')
                            <div class="text-danger small mt-2">
                                <i class="bi bi-exclamation-circle me-1"></i> {{ $message }}
                            </div>
                            @enderror
                        </div>
                        <div class="mb-4">
                            <label class="form-label fw-medium text-dark mb-2" for="chat_id">
                                Telegram Chat ID <span class="text-danger">(untuk kirim notifikasi laporan ke user)</span>
                            </label>
                            <input
                                type="number"
                                class="form-control form-control-lg shadow-none border @error('chat_id') is-invalid @enderror"
                                id="chat_id"
                                name="chat_id"
                                placeholder="Masukkan chat id anda"
                                value="{{ old('chat_id') }}"
                                required>
                            @error('chat_id')
                            <div class="text-danger small mt-2">
                                <i class="bi bi-exclamation-circle me-1"></i> {{ $message }}
                            </div>
                            @enderror
                        </div>

                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-medium text-dark mb-2" for="role">
                                    Role <span class="text-danger">*</span>
                                </label>
                                <select id="roleM" class="@error('role') is-invalid @enderror" name="role">
                                    <option data-placeholder="true" value="">Pilih Role...</option>
                                    @foreach($role_cat as $cat)
                                        <optgroup label="{{$cat->name}}">
                                            @foreach($cat->roles as $role)
                                                <option value="{{$role->id}}">{{$role->name}}</option>
                                            @endforeach
                                        </optgroup>
                                    @endforeach
                                </select>
                                @error('role')
                                <div class="text-danger small mt-2">
                                    <i class="bi bi-exclamation-circle me-1"></i> {{ $message }}
                                </div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-medium text-dark mb-2" for="status">
                                    Status <span class="text-danger">*</span>
                                </label>
                                <select
                                    class="form-select form-select-lg shadow-none border @error('status') is-invalid @enderror"
                                    name="status"
                                    id="status"
                                    required>
                                    <option value="" disabled>Pilih status</option>
                                    <option value="1" {{ old('status') == '1' ? 'selected' : '' }}>Aktif</option>
                                    <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>Tidak Aktif</option>
                                </select>
                                @error('status')
                                <div class="text-danger small mt-2">
                                    <i class="bi bi-exclamation-circle me-1"></i> {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>

                        <div class="d-flex gap-2 justify-content-end pt-3 border-top">
                            <button type="submit" class="btn btn-lg btn-primary px-4">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{asset('assets/custom/js/slimselect.js')}}"></script>
    <script>
        new SlimSelect({
            select: '#roleM'
        })
    </script>
@endsection