@include('front.include.header')
<div  style="background-image:url({{asset('media/bg_image.png')}})" class="wrapper d-flex align-items-stretch">
    @include('front.include.sidebar')
        @yield('front_content')
        
        <div style="width: 100% !important; margin: 40px" class="row">
            <div class="col-md-9" style="margin: 20px">
                <h2 style="text-align: center; color: #231877;" class="hurme_reg;">Expences</h2>
                <hr><hr>
            </div>
           <div class="col-md-12">
           <button style="background: #47C1CA; border: none;padding: 10px;border-radius:10px;color:#fff;font-size: 16px;">Total montly expences:{{$expences->sum('total')}} €</button>
           
  <table style="width: 100%;  border-collapse: collapse; margin: 20px 0; font-size: 18px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: hidden;">
    <thead style="background-color: #FDC764; color: white; text-align: left;">
      <tr>
        <th style="padding: 12px 15px; border-bottom: 1px solid #ddd; font-weight: bold;">Title</th>
        <th style="padding: 12px 15px; border-bottom: 1px solid #ddd; font-weight: bold;">Description</th>
        <th style="padding: 12px 15px; border-bottom: 1px solid #ddd; font-weight: bold;">Total</th>
        <th style="padding: 12px 15px; border-bottom: 1px solid #ddd; font-weight: bold;">Delete</th>
      </tr>
    </thead>
    <tbody>
        @foreach ($expences as $item)
            
        <tr style="background-color: #f9f9f9;">
            <td style="padding: 12px 15px; border-bottom: 1px solid #ddd; color: #333;">{{$item->title}}</td>
            <td style="padding: 12px 15px; border-bottom: 1px solid #ddd; color: #333;">{{$item->description}}</td>
            <td style="padding: 12px 15px; border-bottom: 1px solid #ddd; color: #333;">{{$item->total}} €</td>
            <td style="padding: 12px 15px; border-bottom: 1px solid #ddd; color: #333;">
                <form action="{{route('expencesAction.destroy',$item->id)}}" method="POST">
                    @csrf
                    @method('delete')
                    <button style="padding: 15px 25px; background-color: #eb3291;color: #fff; border: none; border-radius: 5px; cursor: pointer;">Delete</button>
                </form>
            </td>
            
        </tr>
        @endforeach
    </tbody>
  </table>
  

           </div>
          <form style="display: flex;width: 100%;" action="{{route('expencesAction.store')}}" method="post">
            @csrf
           <div class="col-md-3">
            <div><span style="font-family: hurme_reg;font-size: 22px;">Title</span></div>
            <input required name="title" style="width: 100%; padding: 10px;border-radius: 20px;border:2px solid #231877;" type="text">
           </div>
           <div class="col-md-3">
            <div><span style="font-family: hurme_reg;font-size: 22px;">Description</span></div>
            <input required name="description" style="width: 100%; padding: 10px;border-radius: 20px;border:2px solid #231877;" type="text">
           </div>
           <div class="col-md-3">
            <div><span style="font-family: hurme_reg;font-size: 22px;">Total</span></div>
            <input required name="total" style="width: 100%; padding: 10px;border-radius: 20px;border:2px solid #231877;" type="number">
           </div>
           <div class="col-md-3">
            <div><span style="font-family: hurme_reg;font-size: 22px;">Add Expences</span></div>
            <button style="background: #47C1CA; border: none;padding: 10px;border-radius:10px;color:#fff;font-size: 16px;">+ Add Expences</button>
           </div>
        </form>
       
       </div>
  
    </div>
   
    @include('front.include.footer')