@extends('layout')
@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">Ajouter dépense</span>
            </a>
            <form action="{{ route('expens.store') }}" method="post" enctype="multipart/form-data" id="expens-form">
                {{ csrf_field() }}
                <x-form-group label="Titre:" required='true'>
                    <div class="w-1/2">
                        <input type="text" name="title" class="form-control custom-input" placeholder="Titre"
                            value="{{old('title')}}" required>
                        @if ($errors->has('title'))
                            <div>
                                <span class="text-red-500 text-xs italic">Ce champ est invalide!</span>
                            </div>
                        @endif
                    </div>
                </x-form-group>
                <x-form-group label="Propriété:" required='true'>
                    <div class="w-1/2">
                        <select class="form-control select-search" name="housing_id" data-fouc>
                            @foreach($housing as $key => $h)
                                <option value="{{ $h->id }}">{{ $h->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </x-form-group>
                <x-form-group label="Montant:" required='true'>
                    <div class="w-1/2">

                        <input type="text" pattern="[0-9]+(\.[0-9]+)?" name="amount" class="form-control custom-input "
                            placeholder="Montant" required value="{{old('amount')}}">

                        @if ($errors->has('amount'))
                            <div>
                                <span class="text-red-500 text-xs italic">Ce champ est invalide!</span>
                            </div>
                        @endif
                    </div>
                </x-form-group>
                <x-form-group label="Date de dépense:" required='true'>
                    <div class="w-1/2 ">

                        <input type="date" name="date_dep" required class="form-control custom-input"
                            value="{{old('date_dep')}}">
                        @if ($errors->has('date_dep'))
                            <div>
                                <span class="text-red-500 text-xs italic">Ce champ est invalide!</span>
                            </div>
                        @endif
                    </div>
                </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" name="pic_name">
                            <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
                    </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>
    <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