@extends('layouts.main')

@section('content')

    <h1>Supplier List</h1>

   <button type="button" class="btn btn-success" data-toggle="modal" data-target="#add_suplier">
      Add Supplier
    </button>

    <hr>

    <input type="hidden" class="number">   

    <table class="table" id="example">
        <thead>
            <th>Name</th>
            <th>Phone number</th>
            <th>Address</th>
            <th>Action</th>
        </thead>

        <tbody>
            @foreach($suppliers as $supplier)
                <tr>
                    <td style="text-transform: uppercase;">{{$supplier->name}}</td>
                    <td>{{$supplier->phone_number}}</td>
                    <td>{{$supplier->address}}</td>
                    <td>
                        <a href="{{route('supplier.edit',$supplier->id)}}">Edit</a>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
                  



    <div class="modal fade" id="add_suplier" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add Supplier</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <label>Name *</label>
                    <input type="text" id="name"  class="form-control">

                    <label>Phone number *</label>
                    <input type="text" id="phone_number"  class="form-control">   

                    <label>Address</label>
                    <input type="text" id="address"  class="form-control">   
                    <hr>
                    <button class="btn btn-info" id="saveBtn">Save</button>
            
                    <h3 id="display" style="color: green;"></h3>
                </div>            
            </div>
        </div>
    </div>
                
           
@endsection

@push('scripts')
  <script>
       $("#saveBtn").click(function() {
            $("#saveBtn").text("Processing ...");
            $("display").html("")
            $.ajax({
                    type: "POST",
                    url: "{{ route('supplier.store') }}",
                data: {
                    name: $("#name").val(),                              
                    phone_number: $("#phone_number").val(),                              
                    address: $("#address").val(),                              
                    _token: "{{Session::token()}}"
                },
                success: function(result){
                    window.location.reload();
                }
            })
    });
  </script> 

@endpush