@extends('back.layout')

@section('content')
    <main class="main-content w-full px-[var(--margin-x)] pb-8">
        <div class="flex items-center 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>
        <div class="grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">
            <div class="col-span-12">
                <div class="card">
                    <div class="border-b border-slate-200 p-4 dark:border-navy-500 sm:px-5">
                        <div class="flex items-center justify-between space-x-2">
                            <div class="flex items-center">
                                <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" style="margin-left: 7px;">
                                    Edit Team Member
                                </h4>
                            </div>
                            <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">
                                <span>Back</span>
                            </a>
                        </div>
                    </div>

                    @if (session('message'))
                        <div class="alert-success fixed top-4 right-4 z-50 max-w-sm rounded-lg border-l-4 border-green-500 bg-green-100 p-4 text-green-800 shadow-lg dark:bg-green-900 dark:text-green-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="background-color: green">
                            <div class="flex items-center space-x-3">
                                <svg class="h-6 w-6 text-green-500" 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>
                                <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')
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <label class="block">
                                <span>Name <span style="color:red">*</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 style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                            <label class="block">
                                <span>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 style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                            <label class="block">
                                <span>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 style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                            {{-- <label class="block">
                                <span>Facebook URL</span>
                                <input name="facebook" type="url"
                                    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 Facebook URL" value="{{ old('facebook', $equipe->facebook) }}">
                                @error('facebook')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label> --}}
                            <label class="block">
                                <span>LinkedIn URL</span>
                                <input name="linkedin" type="url"
                                    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 LinkedIn URL" value="{{ old('linkedin', $equipe->linkedin) }}">
                                @error('linkedin')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                            <label class="block">
                                <span>X URL</span>
                                <input name="X" type="url"
                                    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 X URL" value="{{ old('X', $equipe->X) }}">
                                @error('X')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                            <label class="block">
                                <span>Email</span>
                                <input name="mail" type="email"
                                    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 email" value="{{ old('mail', $equipe->mail) }}">
                                @error('mail')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                            <label class="block">
                                <span>Secondary Email</span>
                                <input name="mail2" type="email"
                                    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 secondary email" value="{{ old('mail2', $equipe->mail2) }}">
                                @error('mail2')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                            <div>
                                <span>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-red-500">{{ $message }}</span>
                                @enderror
                                @if ($equipe->image)
                                    <div class="mt-4">
                                        <p class="mb-2 text-sm font-semibold">Current Image:</p>
                                        <div class="relative">
                                            @if (\Illuminate\Support\Facades\Storage::disk('public')->exists($equipe->image))
                                                <img src="{{ asset('storage/' . $equipe->image) }}"
                                                     class="rounded-lg w-full h-[100px] object-contain"
                                                     alt="{{ $equipe->nom }}">
                                            @else
                                                <div class="flex items-center justify-center rounded-lg bg-gray-100 p-2 h-[100px]">
                                                    <span class="text-sm text-red-500">Image not found: {{ $equipe->image }}</span>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            FilePond.create(document.querySelector('input[name="image"]'), {
                allowMultiple: false,
                storeAsFile: true,
                acceptedFileTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/tif'],
                maxFileSize: '50MB',
            });
        });
    </script>
@endsection