@php
    $agences = \Illuminate\Support\Facades\Auth::user()->societe->agences;
@endphp
<div class="container mx-auto py-8" x-data="{ isEditing: false, estInterimaire: @json($est_interimaire) }">
    <div class="flex flex-col">
        <div class="w-full md:w-2/3">
            <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
                <h2 class="text-xl mb-4">Fiche RH de <b>{{ $prenom }} {{ $nom }}</b></h2>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">Nom:</label>
                    <input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" x-bind:disabled="!isEditing" wire:model="nom">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">Prénom:</label>
                    <input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" x-bind:disabled="!isEditing" wire:model="prenom">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">Taux Horaire (€):</label>
                    <input type="number" step="0.01" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" x-bind:disabled="!isEditing" wire:model="taux_horaire">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">Statut:</label>
                    <select class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" x-bind:disabled="!isEditing" wire:model="est_interimaire" x-on:change="estInterimaire = parseInt($event.target.value)">
                        <option value="0">Salarié</option>
                        <option value="1">Intérimaire</option>
                    </select>
                </div>
                <div class="mb-4" x-bind:class="{ 'block': !estInterimaire, 'hidden': estInterimaire }">
                    <label class="block text-gray-700 text-sm font-bold mb-2">Agence:</label>
                    <select class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" x-bind:disabled="!isEditing" wire:model="agence_id">
                        <option value="">Aucune</option>
                        @foreach($agences as $agence)
                            <option value="{{ $agence->id }}" {{ $agence->id == $agence_id ? 'selected' : '' }}>{{ $agence->nom }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex items-center justify-between">
                    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" x-show="!isEditing" x-on:click="isEditing = true">Éditer</button>
                    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" x-show="isEditing" x-on:click="$wire.call('updatePersonnel'); isEditing = false">Sauvegarder</button>
                    <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" x-on:click="$wire.call('deletePersonnel')">Supprimer</button>
                </div>
                @if(session()->has('message'))
                    <div class="bg-green-500 text-white p-4 mt-4 rounded">
                        {{ session('message') }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>