@extends('layout.main')

@section('content')
    <div class="container grid px-6 mx-auto">
        <h4 class="mb-4 mb-3 text-lg font-semibold text-gray-600 dark:text-gray-300">
            Edit Client
        </h4>
        <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <form action="{{ route('clients.update', $client->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 border border-slate-600 p-4 mb-10">
                    <legend>Personal Information</legend>
                    <label class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">*Full name</span>
                        <input
                            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                            @error('fullname') border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
                            focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                            name="fullname" value="{{ old('fullname', $client->fullname) }}" placeholder="Name">
                        @error('fullname')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>

                    <label class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">*Gender</span>
                        <select name="gender"
                            class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select 
                            @error('gender') border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror 
                            focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray">
                            <option value="">Select gender</option>
                            <option value="Male" {{ old('gender', $client->gender) == 'Male' ? 'selected' : '' }}>Male
                            </option>
                            <option value="Female" {{ old('gender', $client->gender) == 'Female' ? 'selected' : '' }}>Female
                            </option>
                        </select>
                        @error('gender')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>


                    <label class="block mb-3 text-sm">
                        <x-phone-input name="phone" value="{{ old('phone', $client->phone) }}" label="Phone Number"
                            placeholder="Enter your phone number" :preferredCountries="['ke', 'ug', 'tz']" required />
                        @error('phone')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>

                    <label class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">*Id number</span>
                        <input
                            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                            @error('idnumber') border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
                            focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                            name="idnumber" value="{{ old('idnumber', $client->idnumber) }}" placeholder="Id number">
                        @error('idnumber')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>

                    <label class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">*Date of Birth</span>
                        <input type="date"
                            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                            @error('dob') border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror
                            focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                            name="dob" value="{{ old('dob', $client?->dob?->format('Y-m-d')) }}"
                            placeholder="Date of Birth">
                        @error('dob')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>

                    <label for="sector_id" class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">*Sector</span>
                        <select id="sector_id" name="sector_id"
                            class="select2 block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select 
                            @error('sector_id') border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror 
                            focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray">
                            <option value="">Select Sector</option>
                            @foreach ($sectors as $sector)
                                <option value="{{ $sector->id }}"
                                    {{ old('sector_id', $client?->sector_id) == $sector->id ? 'selected' : '' }}>
                                    {{ $sector->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('sector_id')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>

                    <x-form.textarea name="location" label="Location" required="true"
                        value="{{ old('location', $client->location) }}" placeholder="Provide client location details" />

                    <x-form.textarea name="job_description" label="Job Description" required="true"
                        value="{{ old('job_description', $client?->job_description) }}"
                        placeholder="Enter a job description" />

                    <div class="mb-3">
                        <span class="text-gray-700 dark:text-gray-400">
                            Profile Image <small>(max upload size: 2MB, optional)</small>
                        </span>
                        <div class="mb-3 w-full">
                            <input name="avatar" accept="image/*"
                                class="form-control block w-full px-2 py-1 text-sm font-normal text-gray-700 bg-white bg-clip-padding 
                                border border-solid 
                                @error('avatar') border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror 
                                border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
                                id="avatar" type="file">
                            <div class="mt-2">
                                @if ($client->avatar)
                                    <img src="{{ Storage::url($client->avatar) }}" alt="Current Profile Image"
                                        class="max-w-xs h-auto rounded" />
                                @endif
                                <img id="avatar-preview" src="#" alt="Profile Image Preview"
                                    class="hidden max-w-xs h-auto rounded mt-2" />
                            </div>
                        </div>
                        @error('avatar')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <label class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">*Reg fee</span>
                        <select name="regfee"
                            class="js-example-basic-single block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select 
                            @error('regfee') border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror 
                            focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray">
                            <option value="">Select type</option>
                            @foreach ($regfees as $type)
                                <option value="{{ $type->id }}"
                                    {{ old('regfee', $client->regfee) == $type->id ? 'selected' : '' }}>
                                    {{ $type->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('regfee')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>
                </fieldset>

                <fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 border border-slate-600 p-4 mb-10">
                    <legend>Referee Information</legend>

                    <x-form.input type="text" placeholder="Enter referee name" name="referee_name" label="Referee Name"
                        value="{{ old('referee_name', $client?->referee_name) }}" required />

                    <x-form.input type="text" placeholder="Enter referee ID details" name="referee_id"
                        label="Referee ID details" value="{{ old('referee_id', $client?->referee_id) }}" required />

                    <x-form.input type="text" placeholder="Enter referee occupation" name="referee_job"
                        label="Referee Occupation" value="{{ old('referee_job', $client?->referee_job) }}" required />
                    <label class="block mb-3 text-sm">
                        <x-phone-input name="referee_phone" value="{{ old('referee_phone', $client?->referee_phone) }}"
                            label="Referee Contact" placeholder="Enter referee contact" :preferredCountries="['ke', 'ug', 'tz']" required />
                        @error('referee_phone')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label>
                    <x-form.input type="text" placeholder="Enter referee address" name="referee_address"
                        label="Referee Address" value="{{ old('referee_address', $client?->referee_address) }}"
                        required />

                    <div class="mb-3">
                        <span class="text-gray-700 dark:text-gray-400">
                            Referee Picture <small>(max upload size: 2MB, optional)</small>
                        </span>
                        <div class="mb-3 w-full">
                            <input name="referee_pic" accept="image/*"
                                class="form-control block w-full px-2 py-1 text-sm font-normal text-gray-700 bg-white bg-clip-padding 
                                border border-solid 
                                @error('referee_pic') border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror 
                                border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
                                id="referee_pic" type="file">
                            <div class="mt-2">
                                @if ($client->referee_pic)
                                    <img src="{{ Storage::url($client->referee_pic) }}" alt="Current Referee Picture"
                                        class="max-w-xs h-auto rounded" />
                                @endif
                                <img id="referee-pic-preview" src="#" alt="Referee Picture Preview"
                                    class="hidden max-w-xs h-auto rounded mt-2" />
                            </div>
                        </div>
                        @error('referee_pic')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </fieldset>

                <div class="flex justify-end mt-6">
                    <button
                        class="px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
                        type="submit">{{ __('Update Client') }}</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2();
            $('.js-example-basic-single').select2();

            // Preview for Profile Image
            document.getElementById('avatar').addEventListener('change', function(event) {
                const file = event.target.files[0];
                const preview = document.getElementById('avatar-preview');
                if (file) {
                    // Validate file size (2MB = 2 * 1024 * 1024 bytes)
                    if (file.size > 2 * 1024 * 1024) {
                        alert('Profile image must be less than 2MB.');
                        event.target.value = ''; // Clear the input
                        preview.classList.add('hidden');
                        return;
                    }
                    // Validate file type
                    if (!file.type.match('image.*')) {
                        alert('Please select a valid image file.');
                        event.target.value = ''; // Clear the input
                        preview.classList.add('hidden');
                        return;
                    }
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        preview.src = e.target.result;
                        preview.classList.remove('hidden');
                    };
                    reader.readAsDataURL(file);
                } else {
                    preview.classList.add('hidden');
                }
            });

            // Preview for Referee Picture
            document.getElementById('referee_pic').addEventListener('change', function(event) {
                const file = event.target.files[0];
                const preview = document.getElementById('referee-pic-preview');
                if (file) {
                    // Validate file size (2MB = 2 * 1024 * 1024 bytes)
                    if (file.size > 2 * 1024 * 1024) {
                        alert('Referee picture must be less than 2MB.');
                        event.target.value = ''; // Clear the input
                        preview.classList.add('hidden');
                        return;
                    }
                    // Validate file type
                    if (!file.type.match('image.*')) {
                        alert('Please select a valid image file.');
                        event.target.value = ''; // Clear the input
                        preview.classList.add('hidden');
                        return;
                    }
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        preview.src = e.target.result;
                        preview.classList.remove('hidden');
                    };
                    reader.readAsDataURL(file);
                } else {
                    preview.classList.add('hidden');
                }
            });
        });
    </script>
@endpush