@extends('adminlte::page')

@section('title', 'Daftar Pengguna')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1><i class="fas fa-user-plus mr-2"></i>Daftar Pengguna Baharu</h1>
        <div>
            <button type="button" class="btn btn-success mr-2" data-toggle="modal" data-target="#modalPukal">
                <i class="fas fa-file-excel mr-1"></i> Daftar Pukal
            </button>
            <a href="{{ route('admin.users.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left mr-1"></i> Kembali
            </a>
        </div>
    </div>
@stop

@section('content')
    <div class="card card-outline card-primary">
        <div class="card-header">
            <h3 class="card-title">Maklumat Pengguna</h3>
        </div>
        <div class="card-body">
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('admin.users.store') }}" method="POST">
                @csrf

                <div class="row">
                    <!-- Maklumat Akaun -->
                    <div class="col-md-6">
                        <h5 class="text-primary border-bottom pb-2 mb-3">
                            <i class="fas fa-lock mr-1"></i> Maklumat Akaun
                        </h5>

                        <div class="form-group">
                            <label>Nama Penuh <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                value="{{ old('name') }}" placeholder="Masukkan nama penuh">
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label>E-mel <span class="text-danger">*</span></label>
                            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                                value="{{ old('email') }}" placeholder="Masukkan e-mel">
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label>Kata Laluan <span class="text-danger">*</span></label>
                            <input type="password" name="password"
                                class="form-control @error('password') is-invalid @enderror"
                                placeholder="Masukkan kata laluan">
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label>Sahkan Kata Laluan <span class="text-danger">*</span></label>
                            <input type="password" name="password_confirmation" class="form-control"
                                placeholder="Sahkan kata laluan">
                        </div>

                        <div class="form-group">
                            <label>Peranan <span class="text-danger">*</span></label>
                            <select name="role" class="form-control @error('role') is-invalid @enderror">
                                <option value="">-- Pilih Peranan --</option>
                                <option value="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>Admin</option>
                                <option value="supervisor" {{ old('role') == 'supervisor' ? 'selected' : '' }}>Supervisor
                                </option>
                                <option value="checker" {{ old('role') == 'checker' ? 'selected' : '' }}>Checker
                                </option>
                                <option value="pemohon" {{ old('role') == 'pemohon' ? 'selected' : '' }}>Pemohon
                                </option>
                                <option value="pkm" {{ old('role') == 'pkm' ? 'selected' : '' }}>PKM
                                </option>
                            </select>
                            @error('role')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Maklumat Sekolah -->
                    <div class="col-md-6">
                        <h5 class="text-primary border-bottom pb-2 mb-3">
                            <i class="fas fa-school mr-1"></i> Maklumat Sekolah
                        </h5>

                        <div class="form-group">
                            <label>Jenis Sekolah</label>
                            <div class="@error('jenis_sekolah') is-invalid @enderror">
                                @foreach ($jenisSekolahs as $jenis)
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input"
                                            id="jenis_{{ $jenis->kod_jenis }}" name="jenis_sekolah[]"
                                            value="{{ $jenis->nama_jenis }}"
                                            {{ is_array(old('jenis_sekolah')) && in_array($jenis->nama_jenis, old('jenis_sekolah')) ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="jenis_{{ $jenis->kod_jenis }}">
                                            {{ $jenis->kod_jenis }} ({{ $jenis->nama_jenis }})
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                            @error('jenis_sekolah')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label>Kod Sekolah</label>
                            <input type="text" name="kod_sekolah"
                                class="form-control @error('kod_sekolah') is-invalid @enderror"
                                value="{{ old('kod_sekolah') }}" placeholder="Contoh: BEA1234">
                            @error('kod_sekolah')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label>Nama Sekolah</label>
                            <input type="text" name="nama_sekolah"
                                class="form-control @error('nama_sekolah') is-invalid @enderror"
                                value="{{ old('nama_sekolah') }}" placeholder="Masukkan nama sekolah">
                            @error('nama_sekolah')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label>Daerah</label>
                            <select name="daerah" class="form-control @error('daerah') is-invalid @enderror">
                                <option value="">-- Pilih Daerah --</option>
                                @foreach ($daerahs as $daerah)
                                    <option value="{{ $daerah->nama_daerah }}"
                                        {{ old('daerah') == $daerah->nama_daerah ? 'selected' : '' }}>
                                        {{ $daerah->nama_daerah }}
                                    </option>
                                @endforeach
                            </select>
                            @error('daerah')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="border-top pt-3 mt-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save mr-1"></i> Simpan Pengguna
                    </button>
                    <a href="{{ route('admin.users.index') }}" class="btn btn-secondary ml-2">
                        <i class="fas fa-times mr-1"></i> Batal
                    </a>
                </div>
            </form>
        </div>
    </div>
@stop

<!-- Modal Daftar Pukal -->
<div class="modal fade" id="modalPukal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="fas fa-file-excel mr-1"></i> Daftar Pukal - Upload Excel</h5>
                <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
            </div>
            <form action="{{ route('admin.users.import-pukal') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle mr-1"></i>
                        Muat turun <a href="{{ route('admin.users.template-excel') }}"
                            class="font-weight-bold">Template Excel</a>
                        sebagai panduan format fail yang betul.
                    </div>
                    <p class="text-muted small mb-2">Kolum yang diperlukan dalam fail Excel:</p>
                    <div class="table-responsive mb-3">
                        <table class="table table-sm table-bordered">
                            <thead class="thead-light">
                                <tr>
                                    <th>Kolum</th>
                                    <th>Keterangan</th>
                                    <th>Wajib</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>name</code></td>
                                    <td>Nama penuh</td>
                                    <td><span class="badge badge-danger">Ya</span></td>
                                </tr>
                                <tr>
                                    <td><code>email</code></td>
                                    <td>Alamat e-mel</td>
                                    <td><span class="badge badge-danger">Ya</span></td>
                                </tr>
                                <tr>
                                    <td><code>password</code></td>
                                    <td>Kata laluan awal</td>
                                    <td><span class="badge badge-danger">Ya</span></td>
                                </tr>
                                <tr>
                                    <td><code>role</code></td>
                                    <td>admin / supervisor / checker / pemohon</td>
                                    <td><span class="badge badge-danger">Ya</span></td>
                                </tr>
                                <tr>
                                    <td><code>jenis_sekolah</code></td>
                                    <td>Jenis sekolah (SK, SMK dll)</td>
                                    <td><span class="badge badge-secondary">Tidak</span></td>
                                </tr>
                                <tr>
                                    <td><code>kod_sekolah</code></td>
                                    <td>Kod sekolah</td>
                                    <td><span class="badge badge-secondary">Tidak</span></td>
                                </tr>
                                <tr>
                                    <td><code>nama_sekolah</code></td>
                                    <td>Nama sekolah</td>
                                    <td><span class="badge badge-secondary">Tidak</span></td>
                                </tr>
                                <tr>
                                    <td><code>daerah</code></td>
                                    <td>Daerah</td>
                                    <td><span class="badge badge-secondary">Tidak</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="form-group">
                        <label>Pilih Fail Excel <span class="text-danger">*</span></label>
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="fail_excel" name="fail_excel"
                                accept=".xlsx,.xls,.csv" required>
                            <label class="custom-file-label" for="fail_excel">Pilih fail...</label>
                        </div>
                        <small class="text-muted">Format: .xlsx, .xls, .csv | Saiz maksimum: 5MB</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times mr-1"></i> Batal
                    </button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-upload mr-1"></i> Muat Naik & Import
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('js')
    <script>
        document.getElementById('fail_excel').addEventListener('change', function() {
            var fileName = this.files[0] ? this.files[0].name : 'Pilih fail...';
            this.nextElementSibling.textContent = fileName;
        });
    </script>
@endpush
