@extends('layouts/contentNavbarLayout')

@section('title', 'Supervisor - Edit Supervisor')
@section('page-style')
    <link href="{{ asset('assets/css/select2.min.css') }}" rel="stylesheet" />
    <style>
        .select2-container--default .select2-selection--multiple {
            height: 3rem;
        }
    </style>
@endsection
@section('content')
    <h4 class="py-3 mb-4">
        <span class="text-muted fw-light">
            <a href="{{ route('supervisor') }}" class="text-muted text-decoration-none">Supervisor</a> /
        </span>
        Edit {{ $user->name }}
    </h4>
    <!-- Basic Layout -->
    <div class="row">
        <div class="col-xl">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Edit</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('supervisor.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="slug" value="{{ $user->slug }}">
                        <div class="form-floating form-floating-outline mb-4">
                            <input type="text" class="form-control" id="basic-default-username" placeholder="User Name"
                                name="name" value="{{ $user->name }}" />
                            <label for="basic-default-username">User Name</label>
                        </div>

                        <div class="mb-4">
                            <div class="input-group input-group-merge">
                                <div class="form-floating form-floating-outline">
                                    <input type="text" id="basic-default-email" class="form-control" placeholder="Email"
                                        aria-label="email" aria-describedby="basic-default-email2"
                                        value="{{ $user->email }}" disabled />
                                    <label for="basic-default-email">Email</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-floating form-floating-outline mb-4">
                            <input type="number" id="basic-default-phone"
                                class="form-control phone-mask @error('phone') is-invalid @enderror" name="phone"
                                placeholder="Phone Number"
                                oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 15)" minlength="3"
                                maxlength="15" value="{{ old('phone', $user->phone) }}" />
                            <label for="basic-default-phone">Phone No</label>

                            @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror

                        </div>
                        <div class="form-floating form-floating-outline mb-4">
                            <input type="file" class="form-control @error('photo') is-invalid @enderror"
                                id="upload-photo" accept=".jpg, .jpeg, .png" name="photo" onchange="validateFile(this)">
                            <label class="input-group-text" for="upload-photo">Upload</label>
                            <div class="form-text"> Allowed file types: .jpg, .jpeg, .png. Max file size: 2MB. </div>
                            @error('photo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Dropdown for Status -->
                        <div class="form-floating form-floating-outline mb-4">
                            <select class="form-control @error('status') is-invalid @enderror" id="status"
                                name="status">
                                <option value="Active" {{ old('status', $user->status) === 'Active' ? 'selected' : '' }}>
                                    Active</option>
                                <option value="Inactive"
                                    {{ old('status', $user->status) === 'Inactive' ? 'selected' : '' }}>
                                    Inactive</option>
                            </select>
                            <label for="status">Status</label>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- <div class="col-md-12 mb-4">
                            <div class="input-group input-group-merge">
                                <div class="form-floating form-floating-outline">
                                    <select name="agentIds[]" id="availableAgents"
                                        class="form-select form-control select2-multiple" multiple aria-label="Select Agent"
                                        style="height:10rem">

                                        <!-- Check if availableAgents is empty -->
                                        @if ($availableAgents->isEmpty())
                                            <option value="" disabled>No Available Agents</option>
                                        @else
                                            <!-- Loop through availableAgents and display them -->
                                            @foreach ($availableAgents as $agent)
                                                <option value="{{ $agent->id }}"
                                                    @if (in_array($agent->id, $assignedAgents)) selected @endif>
                                                    {{ $agent->name }}
                                                </option>
                                            @endforeach
                                        @endif

                                    </select>
                                </div>
                            </div>
                        </div> --}}

                        <button type="submit" class="btn btn-primary">Update</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-script')
    {{-- <script src="{{ asset('assets/js/select2.min.js') }}"></script> --}}
    <script>
        // select2Initialise('availableAgents', 'Select Agent'); //initializing the multi select, for select box
        // function select2Initialise(inputID, placeholder) {
        //     $('#' + inputID).select2({
        //         placeholder: placeholder, // Optional placeholder
        //         allowClear: true, // Option to allow clearing the selection
        //         dropdownCssClass: 'custom-select2-dropdown'
        //     });
        // }

        function validateFile(input) {
            const file = input.files[0];
            const maxSize = 2 * 1024 * 1024; // 2MB in bytes

            if (file) {
                const fileType = file.type;
                const validTypes = ["image/jpeg", "image/jpg", "image/png"];

                if (!validTypes.includes(fileType)) {
                    alert("Only JPG, JPEG, and PNG files are allowed.");
                    input.value = ''; // Clear the input
                    return;
                }

                if (file.size > maxSize) {
                    alert("File size must be less than 2MB.");
                    input.value = ''; // Clear the input
                    return;
                }
            }
        }

        document.getElementById('basic-default-phone').addEventListener('input', function() {
            // Check if the field has an error class and remove the error message
            if (this.classList.contains('is-invalid')) {
                this.classList.remove('is-invalid'); // Remove the error class
                let errorFeedback = this.closest('.form-floating').querySelector('.invalid-feedback');
                if (errorFeedback) {
                    errorFeedback.remove(); // Remove the error message
                }
            }
        });

        document.getElementById('upload-photo').addEventListener('change', function() {
            // Check if the file input has an error class and remove the error message
            if (this.classList.contains('is-invalid')) {
                this.classList.remove('is-invalid'); // Remove the error class
                let errorFeedback = this.closest('.form-floating').querySelector('.invalid-feedback');
                if (errorFeedback) {
                    errorFeedback.remove(); // Remove the error message
                }
            }
        });
    </script>
@endsection