@php
    if ($user == null) {
        $title = 'User Add/Edit';
        $user_userid = 0;
        $user_title = '';
        $user_username = '';
        $user_firstname = '';
        $user_lastname = '';
        $user_email = '';
        $user_phone = '';
        $user_address = '';
        $user_position = '';
        $user_role = '';
        $user_picture = 'default.png';
        $user_division_id = '';
    } else {
        $title = 'User Add/Edit';
        $user_userid = $user->user_userid;
        $user_title = $user->user_title;
        $user_username = $user->user_username;
        $user_firstname = $user->user_firstname;
        $user_lastname = $user->user_lastname;
        $user_email = $user->user_email;
        $user_phone = $user->user_phone;
        $user_address = $user->user_address;
        $user_position = $user->user_position;
        $user_picture = $user->user_picture;
        $user_role = $user->user_role;
        $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_picture"]');
            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.sidebar')
    @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_picture }}">
                                <div class="row">
                                    <div class="col-md-4">
                                    </div>
                                    <div class="col-md-4">
                                        <img id="previewImage"
                                            src="{{ !empty($user_picture) ? asset('user_pictures/' . $user_picture) : asset('user_pictures/default.png') }}"
                                            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_picture" accept="image/*">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-floating mb-4">
                                            <input id="user_username" type="text" class="form-control"
                                                placeholder="Username" name="user_username"
                                                value="{{ old('user_username', $user_username) }}">
                                            <label for="textInputExample">Username</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-floating mb-4">
                                            <input id="user_firstname" type="text" class="form-control"
                                                placeholder="First Name" name="user_firstname"
                                                value="{{ old('user_firstname', $user_firstname) }}">
                                            <label for="textInputExample">First Name</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-floating mb-4">
                                            <input id="user_lastname" type="text" class="form-control"
                                                placeholder="Last Name" name="user_lastname"
                                                value="{{ old('user_lastname', $user_lastname) }}">
                                            <label for="textInputExample">Last Name</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-floating mb-4">
                                            <input id="user_email" type="email" class="form-control" placeholder="E-mail"
                                                name="user_email" value="{{ old('user_email', $user_email) }}">
                                            @error('user_email')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                            <label for="textInputExample">E-mail</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 --}}
                                    {{-- @if ($user == null)
                                        <div class="col-md-4">
                                            <div class="form-floating mb-4">
                                                <select class="form-select" name="role" id="role">
                                                    <option value="default" selected disabled>Please select</option>
                                                    @foreach ($role as $i => $roleItem)
                                                        <option value="{{ $roleItem->name }}"
                                                            @if ($user_role == $roleItem->name) selected @endif>
                                                            {{ $roleItem->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <label for="role">Role</label>
                                            </div>
                                        </div>
                                    @endif --}}
                                    <div class="col-md-4">
                                        <select class="form-select" id="school_division_id" name="school_division_id"
                                            required>
                                            <option value="">-- Please select division --</option>
                                            @foreach ($divisions as $division)
                                                <option value="{{ $division->school_division_id }}"
                                                    {{ old('school_division_id', $user_division_id) == $division->school_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>

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

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


    @include('layouts.footer')
@endsection