@php
    if ($user == null) {
        $title = 'User Add/Edit';
        $user_userid = 0;
        $user_firstname_en = '';
        $user_lastname_en = '';
        $user_email_siit = '';
        // $user_role = '';
        $user_img = 'default.png';
    } else {
        $title = 'User Add/Edit';
        $user_userid = $user->user_userid;
        $user_firstname_en = $user->user_firstname_en;
        $user_lastname_en = $user->user_lastname_en;
        $user_email_siit = $user->user_email_siit;
        $user_img = $user->user_img;
        // $user_division_id = $user->user_division_id;
    }
@endphp
@extends('layouts.master')
@section('title', $title)

@section('style')
    <style></style>
@endsection

@section('script')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const input = document.querySelector('input[name="user_img"]');
            const preview = document.getElementById('previewImage');

            if (input) {
                input.addEventListener('change', function() {
                    const [file] = this.files;
                    if (file) {
                        preview.src = URL.createObjectURL(file);
                    }
                });
            }
        });
    </script>
@endsection

@section('content')
    @include('layouts.header-sub')

    <section class="wrapper bg-light">
        <div class="container py-10">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <span class="text-dark fs-30">{{ $title }}</span>
                </div>
            </div>

            <div class="col-lg-12">
                <div class="blog single">
                    <div class="card">
                        <div class="card-body">

                            {{-- 🔴 แสดง error ตรงนี้ --}}
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            {{-- 🔴 แสดง error จาก session (เช่น Supervisor ซ้ำ) --}}
                            @if (session('error'))
                                <div class="alert alert-danger">
                                    {{ session('error') }}
                                </div>
                            @endif

                            <form action="{{ url('/useredit') }}" class="text-start mb-3" method="post"
                                enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="user_userid" value="{{ $user_userid }}" />
                                <input type="hidden" name="old_picture" value="{{ $user_img }}">
                                <div class="row">
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-4">
                                        @php
                                            // ตรวจสอบว่ามีไฟล์รูปภาพจริงหรือไม่ ถ้าไม่มีให้ใช้ default
                                            $display_img = asset('user_imgs/default.png');
                                            if(!empty($user_img)) {
                                                // ถ้าใน DB เก็บ path เต็มไว้ (มี /) ให้ใช้ค่าจาก DB เลย
                                                // ถ้าเก็บแค่ชื่อไฟล์ ให้ต่อ path user_imgs/
                                                $display_img = (str_contains($user_img, '/')) ? asset($user_img) : asset('user_imgs/' . $user_img);
                                            }
                                        @endphp
                                        <img id="previewImage"
                                            src="{{ $display_img }}"
                                            class="img-thumbnail mb-3" style="max-width:150px;">
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-4">
                                            <label class="form-label">Profile Picture</label>
                                            <input type="file" class="form-control" name="user_img" accept="image/*">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-floating mb-4">
                                            <input id="user_firstname_en" type="text" class="form-control"
                                                placeholder="First Name" name="user_firstname_en"
                                                value="{{ old('user_firstname_en', $user_firstname_en) }}">
                                            <label for="textInputExample">First Name</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-floating mb-4">
                                            <input id="user_lastname_en" type="text" class="form-control"
                                                placeholder="Last Name" name="user_lastname_en"
                                                value="{{ old('user_lastname_en', $user_lastname_en) }}">
                                            <label for="textInputExample">Last Name</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-floating mb-4">
                                            <input id="user_email_siit" type="email" class="form-control" placeholder="E-mail"
                                                name="user_email_siit" value="{{ old('user_email_siit', $user_email_siit) }}">
                                            @error('user_email_siit')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                            <label for="textInputExample">E-mail SIIT</label>
                                        </div>
                                    </div>
                                    {{-- @if ($user == null) --}}
                                    {{-- <div class="col-md-4">
                                        <div class="form-floating mb-4">
                                            <select class="form-select" name="role" id="role" required>
                                                <option value="" disabled
                                                    {{ old('role', $user_role) ? '' : 'selected' }}>Please select</option>
                                                @foreach ($role as $i => $roleItem)
                                                    <option value="{{ $roleItem->name }}"
                                                        {{ old('role', $user_role) == $roleItem->name ? 'selected' : '' }}>
                                                        {{ $roleItem->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <label for="role">Role</label>
                                        </div>
                                    </div> --}}
                                    {{-- @endif --}}
                                    {{-- <div class="col-md-4">
                                        <select class="form-select" id="user_division_id" name="user_division_id"
                                            required>
                                            <option value="">-- Please select division --</option>
                                            @foreach ($divisions as $division)
                                                <option value="{{ $division->user_division_id }}"
                                                    {{ old('user_division_id', $user_division_id) == $division->user_division_id ? 'selected' : '' }}>
                                                    {{ $division->school_division_name_en }}
                                                    ({{ $division->school_division_shortname }})
                                                </option>
                                            @endforeach
                                        </select>
                                    </div> --}}
                                </div>
                                <br>
                                <div class="text-center">
                                    <button class="btn btn-primary rounded-pill text-light" type="submit">Submit</button>
                                    <button class="btn btn-danger rounded-pill" type="button"
                                        onclick="history.back()">Back</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
    </section>


    @include('layouts.footer')
@endsection