@extends('back.layout')

@section('content')
    <main class="main-content w-full px-[var(--margin-x)] pb-8">
        <div class="flex items-center justify-between space-x-4 py-5 lg:py-6">
            <h2 class="text-xl font-medium text-slate-700 dark:text-navy-100">
                Edit Team Member
            </h2>
            <div class="flex items-center space-x-2">
                <a href="{{ route('equipes.index') }}"
                    class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
                    </svg>
                    <span>Back to List</span>
                </a>
            </div>
        </div>

        <div class="grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">
            <div class="col-span-12 lg:col-span-8">
                <div class="card">
                    <div class="border-b border-slate-200 p-4 dark:border-navy-500 sm:px-5">
                        <div class="flex items-center space-x-2">
                            <div class="flex h-7 w-7 items-center justify-center rounded-lg bg-primary/10 p-1 text-primary dark:bg-accent-light/10 dark:text-accent-light">
                                <i class="fa-solid fa-user"></i>
                            </div>
                            <h4 class="text-lg font-medium text-slate-700 dark:text-navy-100">
                                Personal Information
                            </h4>
                        </div>
                    </div>

                    <!-- Flash Messages -->
                    @if (session('message'))
                        <div class="alert {{ session('message_type') == 'success' ? 'alert-success' : 'alert-error' }} fixed top-4 right-4 z-50 max-w-sm rounded-lg border-l-4 {{ session('message_type') == 'success' ? 'border-green-500 bg-green-100' : 'border-red-500 bg-red-100' }} p-4 {{ session('message_type') == 'success' ? 'text-green-800' : 'text-red-800' }} shadow-lg {{ session('message_type') == 'success' ? 'dark:bg-green-900 dark:text-green-200' : 'dark:bg-red-900 dark:text-red-200' }} animate-fade-in"
                            x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
                            x-transition:leave="transition ease-in-out duration-500" x-transition:leave-start="opacity-100"
                            x-transition:leave-end="opacity-0" style="{{ session('message_type') == 'success' ? 'background-color: #34d399' : 'background-color: #f87171' }}">
                            <div class="flex items-center space-x-3">
                                @if(session('message_type') == 'success')
                                    <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M5 13l4 4L19 7"></path>
                                    </svg>
                                @else
                                    <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M6 18L18 6M6 6l12 12"></path>
                                    </svg>
                                @endif
                                <span style="color: white; font-weight: bold">{{ session('message') }}</span>
                            </div>
                        </div>
                    @endif

                    <form action="{{ route('equipes.update', $equipe->id) }}" method="POST"
                        class="space-y-4 p-4 sm:p-5" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <!-- Tabs for organizing form sections -->
                        <div x-data="{activeTab:'personal'}">
                            <div class="is-scrollbar-hidden overflow-x-auto rounded-lg bg-slate-150 p-1 dark:bg-navy-900">
                                <div class="tabs-list flex space-x-2">
                                    <button type="button" @click="activeTab = 'personal'" :class="activeTab === 'personal' ? 'bg-white shadow dark:bg-navy-700 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'" class="btn shrink-0 px-3 py-1.5 font-medium">
                                        <i class="fa-solid fa-user mr-1"></i>
                                        Personal Info
                                    </button>
                                    <button type="button" @click="activeTab = 'contact'" :class="activeTab === 'contact' ? 'bg-white shadow dark:bg-navy-700 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'" class="btn shrink-0 px-3 py-1.5 font-medium">
                                        <i class="fa-solid fa-address-book mr-1"></i>
                                        Contact Details
                                    </button>
                                    <button type="button" @click="activeTab = 'media'" :class="activeTab === 'media' ? 'bg-white shadow dark:bg-navy-700 dark:text-navy-100' : 'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'" class="btn shrink-0 px-3 py-1.5 font-medium">
                                        <i class="fa-solid fa-image mr-1"></i>
                                        Media & Social
                                    </button>
                                </div>
                            </div>

                            <!-- Personal Information Tab -->
                            <div x-show="activeTab === 'personal'" class="mt-4">
                                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                    <label class="block">
                                        <span class="font-medium text-slate-600 dark:text-navy-100">Name <span class="text-error">*</span></span>
                                        <input name="nom" type="text"
                                            class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                            placeholder="Enter the team member's name" value="{{ old('nom', $equipe->nom) }}" required>
                                        @error('nom')
                                            <span class="text-tiny+ text-error">{{ $message }}</span>
                                        @enderror
                                    </label>
                                    
                                    <div class="sm:col-span-2 border-b border-slate-200 dark:border-navy-500 my-3"></div>
                                    
                                    <label class="block">
                                        <span class="font-medium text-slate-600 dark:text-navy-100">Position (English)</span>
                                        <input name="poste_en" type="text"
                                            class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                            placeholder="Enter the position in English" value="{{ old('poste_en', $equipe->poste_en) }}">
                                        @error('poste_en')
                                            <span class="text-tiny+ text-error">{{ $message }}</span>
                                        @enderror
                                    </label>
                                    <label class="block">
                                        <span class="font-medium text-slate-600 dark:text-navy-100">Position (French)</span>
                                        <input name="poste_fr" type="text"
                                            class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                            placeholder="Enter the position in French" value="{{ old('poste_fr', $equipe->poste_fr) }}">
                                        @error('poste_fr')
                                            <span class="text-tiny+ text-error">{{ $message }}</span>
                                        @enderror
                                    </label>
                                </div>
                            </div>

                            <!-- Contact Details Tab -->
                            <div x-show="activeTab === 'contact'" class="mt-4">
                                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                    <label class="block">
                                        <span class="font-medium text-slate-600 dark:text-navy-100">Primary Email</span>
                                        <div class="relative mt-1.5">
                                            <input name="mail" type="email"
                                                class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                                placeholder="example@email.com" value="{{ old('mail', $equipe->mail) }}">
                                            <span class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
                                                <i class="fa-regular fa-envelope text-base"></i>
                                            </span>
                                        </div>
                                        @error('mail')
                                            <span class="text-tiny+ text-error">{{ $message }}</span>
                                        @enderror
                                    </label>
                                    
                                    <label class="block">
                                        <span class="font-medium text-slate-600 dark:text-navy-100">Secondary Email</span>
                                        <div class="relative mt-1.5">
                                            <input name="mail2" type="email"
                                                class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                                placeholder="secondary@email.com" value="{{ old('mail2', $equipe->mail2) }}">
                                            <span class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
                                                <i class="fa-regular fa-envelope text-base"></i>
                                            </span>
                                        </div>
                                        @error('mail2')
                                            <span class="text-tiny+ text-error">{{ $message }}</span>
                                        @enderror
                                    </label>
                                </div>
                            </div>

                            <!-- Media & Social Tab -->
                            <div x-show="activeTab === 'media'" class="mt-4">
                                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                    <label class="block">
                                        <span class="font-medium text-slate-600 dark:text-navy-100">LinkedIn URL</span>
                                        <div class="relative mt-1.5">
                                            <input name="linkedin" type="url"
                                                class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                                placeholder="https://linkedin.com/in/username" value="{{ old('linkedin', $equipe->linkedin) }}">
                                            <span class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
                                                <i class="fa-brands fa-linkedin-in"></i>
                                            </span>
                                        </div>
                                        @error('linkedin')
                                            <span class="text-tiny+ text-error">{{ $message }}</span>
                                        @enderror
                                    </label>
                                    
                                    <label class="block">
                                        <span class="font-medium text-slate-600 dark:text-navy-100">X URL</span>
                                        <div class="relative mt-1.5">
                                            <input name="X" type="url"
                                                class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                                placeholder="https://x.com/username" value="{{ old('X', $equipe->X) }}">
                                            <span class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
                                                <i class="fa-brands fa-x-twitter"></i>
                                            </span>
                                        </div>
                                        @error('X')
                                            <span class="text-tiny+ text-error">{{ $message }}</span>
                                        @enderror
                                    </label>
                                    
                                    <div class="sm:col-span-2">
                                        <span class="font-medium text-slate-600 dark:text-navy-100">Profile Image</span>
                                        <div class="filepond fp-bordered fp-grid mt-1.5 [--fp-grid:2]">
                                            <input type="file" name="image" accept="image/*">
                                        </div>
                                        @error('image')
                                            <span class="text-tiny+ text-error">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="flex justify-end space-x-2 pt-4">
                            <button type="reset"
                                class="btn min-w-[7rem] border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
                                <i class="fa-solid fa-rotate-left mr-1"></i>
                                Reset
                            </button>
                            <button type="submit"
                                class="btn min-w-[7rem] bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                <i class="fa-solid fa-save mr-1"></i>
                                Update
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Preview Card -->
            <div class="col-span-12 lg:col-span-4">
                <div class="card p-4 sm:p-5">
                    <div class="flex items-center space-x-2 pb-2 text-lg font-medium text-slate-800 dark:text-navy-50">
                        <i class="fa-regular fa-eye text-primary dark:text-accent"></i>
                        <div>Team Member Preview</div>
                    </div>
                    
                    <div class="flex flex-col items-center p-5 text-center">
                        <div class="avatar h-24 w-24 rounded-full ring ring-primary/30">
                            @if ($equipe->image && \Illuminate\Support\Facades\Storage::disk('public')->exists($equipe->image))
                                <img src="{{ asset('storage/' . $equipe->image) }}" alt="{{ $equipe->nom }}" class="rounded-full">
                            @else
                                <div class="is-initial rounded-full bg-primary text-white">
                                    {{ strtoupper(substr($equipe->nom, 0, 2)) }}
                                </div>
                            @endif
                        </div>

                        <p class="mt-3 text-lg font-medium text-slate-700 dark:text-navy-100">
                            {{ $equipe->nom }}
                        </p>
                        <p class="text-xs+ text-slate-400 dark:text-navy-300">
                            {{ $equipe->poste_en }}
                        </p>
                        
                        @if($equipe->mail || $equipe->mail2)
                            <div class="mt-3 flex space-x-2 text-xs">
                                @if($equipe->mail)
                                    <a href="mailto:{{ $equipe->mail }}" class="tag bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
                                        <i class="fa-regular fa-envelope mr-1"></i>
                                        <span>{{ $equipe->mail }}</span>
                                    </a>
                                @endif
                            </div>
                        @endif
                        
                        <div class="mt-4 flex space-x-4">
                            @if($equipe->linkedin)
                                <a href="{{ $equipe->linkedin }}" class="btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 hover:shadow-lg hover:shadow-slate-200/50 focus:bg-slate-200 focus:shadow-lg focus:shadow-slate-200/50 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:hover:shadow-navy-450/50 dark:focus:bg-navy-450 dark:focus:shadow-navy-450/50 dark:active:bg-navy-450/90" target="_blank">
                                    <i class="fab fa-linkedin-in"></i>
                                </a>
                            @endif
                            @if($equipe->X)
                                <a href="{{ $equipe->X }}" class="btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 hover:shadow-lg hover:shadow-slate-200/50 focus:bg-slate-200 focus:shadow-lg focus:shadow-slate-200/50 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:hover:shadow-navy-450/50 dark:focus:bg-navy-450 dark:focus:shadow-navy-450/50 dark:active:bg-navy-450/90" target="_blank">
                                    <i class="fab fa-twitter"></i>
                                </a>
                            @endif
                        </div>
                    </div>
                    
                    @if ($equipe->image && \Illuminate\Support\Facades\Storage::disk('public')->exists($equipe->image))
                        <div class="mt-4 flex justify-center">
                            <label class="inline-flex items-center space-x-2">
                                <input type="checkbox" name="supprimer_image" form="delete_image" value="1" class="form-checkbox is-outline h-5 w-5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent">
                                <span class="text-slate-800 dark:text-navy-100">Delete current image</span>
                            </label>
                        </div>
                        
                        <form id="delete_image" action="{{ route('equipes.update', $equipe->id) }}" method="POST" class="hidden">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="nom" value="{{ $equipe->nom }}">
                            <input type="hidden" name="poste_en" value="{{ $equipe->poste_en }}">
                            <input type="hidden" name="poste_fr" value="{{ $equipe->poste_fr }}">
                            <input type="hidden" name="linkedin" value="{{ $equipe->linkedin }}">
                            <input type="hidden" name="X" value="{{ $equipe->X }}">
                            <input type="hidden" name="mail" value="{{ $equipe->mail }}">
                            <input type="hidden" name="mail2" value="{{ $equipe->mail2 }}">
                        </form>
                    @endif
                </div>
            </div>
        </div>
    </main>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            FilePond.registerPlugin(
                FilePondPluginImagePreview,
                FilePondPluginFileValidateType
            );
            
            FilePond.create(document.querySelector('input[name="image"]'), {
                allowMultiple: false,
                storeAsFile: true,
                acceptedFileTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/tif'],
                maxFileSize: '50MB',
                labelIdle: 'Drag & Drop your team member photo or <span class="filepond--label-action">Browse</span>',
                imagePreviewHeight: 170,
                stylePanelLayout: 'compact circle',
                styleLoadIndicatorPosition: 'center bottom',
                styleProgressIndicatorPosition: 'right bottom',
                styleButtonRemoveItemPosition: 'center bottom',
                styleButtonProcessItemPosition: 'right bottom',
            });
        });
    </script>
@endsection