@extends('backend.layouts.master')
@section('title','E-SHOP || Invoice Edit')
@section('main-content')

<div class="card">
    <h5 class="card-header">Edit Invoice</h5>
    <div class="card-body">
      <form method="post" action="{{route('invoice.update', $invoice->id)}}">
        {{csrf_field()}}
        @method('PATCH')
        
        <div class="form-group">
          <label for="name" class="col-form-label">Name <span class="text-danger">*</span></label>
          <input id="name" type="text" name="name" placeholder="Enter name"  value="{{$invoice->name}}" class="form-control">
          @error('name')
          <span class="text-danger">{{$message}}</span>
          @enderror
        </div>

        <div class="form-group">
          <label for="email" class="col-form-label">Email <span class="text-danger">*</span></label>
          <input id="email" type="text" name="email" placeholder="Enter email"  value="{{$invoice->email}}" class="form-control">
          @error('email')
          <span class="text-danger">{{$message}}</span>
          @enderror
        </div>

        <div class="form-group">
          <label for="phone" class="col-form-label">Phone <span class="text-danger">*</span></label>
          <input id="phone" type="text" name="phone" placeholder="Enter phone"  value="{{$invoice->phone}}" class="form-control">
          @error('phone')
          <span class="text-danger">{{$message}}</span>
          @enderror
        </div>

        <div class="form-group">
          <label for="payment_gateway" class="col-form-label">Payment Gateway <span class="text-danger">*</span></label>
          <select name="payment_gateway" id="payment_gateway" class="form-control" >
            <option value="">Select Payment Gateway</option>
              @if (!empty($payment_gateways))
                @foreach ($payment_gateways as $gateway)
                  <option value="{{ $gateway->id }}" {{ $invoice->payment_gateway == $gateway->id ? 'selected' : '' }} >{{ $gateway->name }}</option>
                @endforeach
              @endif
          </select>
          @error('payment_gateway')
          <span class="text-danger">{{$message}}</span>
          @enderror
        </div>

        <div class="form-group">
          <label for="currency" class="col-form-label">Currency <span class="text-danger">*</span></label>
          <select name="currency" id="currency" class="form-control" >
            <option value="">Select Currency</option>
              @if (!empty($currency))
                @foreach ($currency as $curr)
                  <option value="{{ $curr->id }}" {{ $invoice->currency == $curr->id ? 'selected' : '' }}  >{{ $curr->name }}</option>
                @endforeach
              @endif
          </select>
          @error('currency')
          <span class="text-danger">{{$message}}</span>
          @enderror
        </div>

        <div class="form-group">
          <label for="due_date" class="col-form-label">Due Date <span class="text-danger">*</span></label>
          <input id="due_date" type="date" name="due_date" placeholder="Enter Due Date"  value="{{$invoice->due_date}}" class="form-control">
          @error('due_date')
          <span class="text-danger">{{$message}}</span>
          @enderror
        </div>
        
        <div class="form-group">
          <label for="status" class="col-form-label">Status <span class="text-danger">*</span></label>
          <select name="status" class="form-control">
              <option value="active" {{ $invoice->status == 'active' ? 'selected' : '' }} >Active</option>
              <option value="inactive" {{ $invoice->status == 'inactive' ? 'selected' : '' }} >Inactive</option>
          </select>
          @error('status')
          <span class="text-danger">{{$message}}</span>
          @enderror
        </div>

        <div class="page-content page-container" id="page-content">
          <div class="padding">
              <div class="row container d-flex justify-content-center">
                  <div class="col-lg-12 grid-margin stretch-card">
                      <div class="card">
                          <div class="card-body">
                              <h4 class="card-title text-center">Services</h4>
                              <hr>
                              <div class="table-responsive">
                                  <table id="faqs" class="table table-hover">
                                      <thead>
                                          <tr>
                                              <th>Service</th>
                                              <th>Price</th>
                                              <th>Action</th>
                                          </tr>
                                      </thead>
                                      <tbody>
                                          @if($invoice->invoiceItems)
                                          @foreach($invoice->invoiceItems as $key => $item)
                                              <tr id="invoiceItemRow{{ $item->id }}" >
                                                <td><input type="text" name="services[]" value="{{ $item->service }}" class="form-control" /></td>
                                                <td><input type="text" name="prices[]" value="{{ $item->price }}" class="form-control" /></td>
                                                <td class="mt-10"><button type="button" data-row="{{ $item->id }}" class="badge badge-danger delete-row-btn"><i class="fa fa-trash"></i> Delete</button></td>
                                              </tr>
                                          @endforeach
                                          @endif
                                      </tbody>
                                  </table>
                              </div>
                              <div class="text-center"><button type="button" onclick="addRow();" class="badge badge-success"><i class="fa fa-plus"></i> ADD NEW</button></div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>


        <div class="form-group mb-3">
          <button type="reset" class="btn btn-warning">Reset</button>
           <button class="btn btn-success" type="submit">Submit</button>
        </div>
      </form>
    </div>
</div>

@endsection

@push('styles')
<link rel="stylesheet" href="{{asset('backend/summernote/summernote.min.css')}}">
@endpush
@push('scripts')
<script src="/vendor/laravel-filemanager/js/stand-alone-button.js"></script>
<script src="{{asset('backend/summernote/summernote.min.js')}}"></script>

<script>
  var row = {{ $invoice->invoiceItems()->max('id') + 1 }};
  function addRow() {
      html = '<tr id="invoiceItemRow' + row + '">';
      html += '<td><input type="text" name="services[]" class="form-control" /></td>';
      html += '<td><input type="text" name="prices[]" class="form-control" /></td>';
      html += '<td class="mt-10"><button type="button" class="badge badge-danger" onclick="$(\'#invoiceItemRow' + row + '\').remove();"><i class="fa fa-trash"></i> Delete</button></td>';
      html += '</tr>';

    $('#faqs tbody').append(html);
    row++;
  }
</script>

<script>
    $(document).ready(function() {
        $('.delete-row-btn').on('click', function() {
            var rowId = $(this).data('row-id');
            $('#invoiceItemRow' + rowId).remove();
        });
    });
</script>

@endpush