@extends('layouts.app')
@section('content')
<style>
   
</style>

<script>
function myFunction() {
  let text = "Are you sure that you want to delete this record.";
  if (confirm(text) == true) {
    text = "You pressed OK!";
  } else {
    text = "You canceled!";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>



<div class="columns" style="padding-top: 0px;margin-bottom: 0px;">
        <div class="toolbar">
            <div class="tool_strip">
                <h2 class="title is-6">Quotations </h2>
            </div>
            <div><a href={{ route('quotations.step1') }} class="button is-primary is-small" >Create Quote </a> </div>
        </div>
</div>


<div  class="columns" style="padding-top:0px">
<div class="column is-12"  style="padding-left:0px">
  <div class="right_panel" >
<table class="table  is-bordered"  style="width:100%">
  <tr> 
    <th>Quotation Number </th>
    <th>Quotation Date </th>
    <th>Customer / Phone </th>
    <th>Project </th>
    <th>Designer </th>
    <th>Specifier </th>
    <th>Sales Rep </th>
    <th>Status </th>
    <th> </th>
  </tr>
@foreach($quotations as $quotation)
<tr>
    <td><a href="{{ route('quotations.show',['id'=>$quotation->id]) }}">{{$quotation->quotation_number}}</a></td>
    <td>{{$quotation->quotation_date}}</td>
    <td>{{$quotation->customer->FirstName}} {{$quotation->customer->LastName}}
      <div class="small-text">{{$quotation->customer->phone}}</div>
    </td>
    <td>{{$quotation->project}}</td>
    <td>{{$quotation->designer}}</td>
    <td>{{$quotation->specifier}}</td>
    <td>{{$quotation->sales_rep}}</td>
    <td>{{$quotation->status}}</td>
    <td>
      <div style="display:flex">
       <div style="margin-right:5px"><a href="{{url('/quotations/'.$quotation->id."/edit")}}"> edit </a></div> |
       <div style="margin-left:5px"><a onclick="return confirm('Are you sure?')" href="{{url('/quotations/delete/'.$quotation->id)}}" > delete </a> </div>
    </div>
    </td>
</tr>
@endforeach

</table>
<div>{{ $quotations->links() }}</div>
</div>
</div>
</div>

@endsection