@extends('layout')

@inject('carbon', 'Carbon\Carbon')

@section('content')
    <div class=" page-header-light" style="border-radius: 0px;">
        <div class="d-flex justify-content-between align-items-center mx-3 my-1">
            <div class="d-flex flex-column tailwind-scope">
                <h4 class="text-white text-2xl font-bold ">Finances & Caisse</h4>
                <p class="text-white text-sm">Dépenses</p>
            </div>
            @include('shared.navbar')
        </div>
        {{-- @include('reservation._search') --}}
    </div>

    <div class="content tailwind-scope h-screen">
        <div class="shadow-md rounded-2xl p-3 m-1">
            <a class="flex items-center mb-4 text-lg " href="/expens">
                <i class="fa-solid fa-arrow-left pr-2"></i> <span class="font-semibold"> Modifier la dépense
                    {{ $expens->title }}</span>
            </a>
            <form action="{{ route('expens.update', $expens) }}" method="post" enctype="multipart/form-data" id="expens-form">
                {{ csrf_field() }}
                <x-form-group label="Titre:">
                    <input type="text" name="title" value="{{$expens->title}}" required class="form-control custom-input w-1/2"
                        placeholder="Titre">
                    @if ($errors->has('title'))
                        <div>
                                <span class="text-red-500 text-xs italic">Ce champ est invalide!</span>
                            </div>
                    @endif
                </x-form-group>
                <x-form-group label="Propriété:">
                    <div class="w-1/2">
                        <select class="form-control select-search"  name="housing_id" data-fouc>
                            @foreach($housing as $key => $h)
                                                    <option selected value="{{ $h->id }}">
                                                        {{ $h->name }}</option>
                            @endforeach
                        </select>
                        @if ($errors->has('housing_id'))
                             <div>
                                <span class="text-red-500 text-xs italic">Ce champ est invalide!</span>
                            </div>
                        @endif
                    </div>
                </x-form-group>
                <x-form-group label="Montant:">
                    <input type="text" pattern="[0-9]+(\.[0-9]+)?" name="amount" required value="{{$expens->amount}}" class="form-control custom-input w-1/2"
                        placeholder="Montant">
                    @if ($errors->has('amount'))
                         <div>
                                <span class="text-red-500 text-xs italic">Ce champ est invalide!</span>
                            </div>
                    @endif
                </x-form-group>
                <x-form-group label="Date de dépense:">
                    <div class="w-1/2 ">
                       
                        <input type="date" required name="date_dep" value="{{ $carbon::create($expens->date_dep)->format('Y-m-d') }}"
                            class="form-control custom-input ">
                    </div>
                    @if ($errors->has('date_dep'))
                         <div>
                                <span class="text-red-500 text-xs italic">Ce champ est invalide!</span>
                            </div>
                    @endif
                </x-form-group>
                <x-form-group label="Image de la facture:">
                    <div class="w-1/2">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="image" name="pic_name" value="">
                            <label class="custom-file-label" for="customFile">Choisir le fichier</label>
                        </div>
                        @if ($errors->has('pic_name'))
                             <div>
                                <span class="text-red-500 text-xs italic">Ce champ est invalide!</span>
                            </div>
                        @endif
                        <a href="{{ url('/')  }}/billings/{{$expens->pic_name}}" target="_blank"
                            rel="noopener noreferrer" class="my-2">{{ $expens->pic_name }}</a>
                    </div>
                </x-form-group>
                <div class="w-full flex">
                    <input type="hidden" class="form-control" name="user_id" value="{{ auth()->user()->id }}">
                    <button type="submit" id="submitBox" class="w-full bg-[#1F9878] font-bold py-2 text-white">
                        Sauvegarder
                    </button>
                </div>
            </form>
        </div>
    </div>
    </div>
<script>
        $(document).on('submit', '#expens-form', function () {
            const button = $('#submitBox');
            button.prop('disabled', true).addClass('opacity-50').html('<i class="fa fa-spinner fa-spin"></i> En cours...');
        });
    </script>
@endsection